首页 文章

D3 Y比例，y对比身高？

提问于
浏览 次
1

我正在学习D3，我可以看到我用这两件事得到了相同的可视化：

var w = 600;
var h = 100;

var dataset = [1, 6, 3, 4, 10, 4, 9]

var svg = d3.select("body").append("svg")
    .attr("height", h)
    .attr("width", w)

var xScale = d3.scale.linear()
    .domain([0, dataset.length])
    .range([0, w]);

使用height属性：

var yScale = d3.scale.linear()
    .domain([0, d3.max(dataset)])
    .range([h, 0]);

svg.selectAll("rect")
    .data(dataset)
    .enter()
    .append("rect")
    .attr({
        x: function(d, i) { return xScale(i); },
        y: function(d) { return yScale(d); },
        width: w / dataset.length,
        height: function(d) { return h - yScale(d); },
        fill: "teal"
    });

enter image description here

或设置y：

var yScale = d3.scale.linear()
    .domain([0, d3.max(dataset)])
    .range([0, h]);

svg.selectAll("rect")
    .data(dataset)
    .enter()
    .append("rect")
    .attr({
        x: function(d, i) { return xScale(i); },
        y: function(d) { return h - yScale(d); },
        width: w / dataset.length,
        height: function(d) { return yScale(d); },
        fill: "teal"
    });

enter image description here

是否更正确，如果是，为什么？

javascript svg d3.js

1 回答

  • 5

    现在我进入后面的章节，它似乎是前选项，在创建yAxis时使用 range([h, 0]) 更好 . 如果我使用后一个选项 range([0, h]) ，图表如下所示（没有yAxis调用的转换：

    enter image description here

    这通常不是人们想要的 .

    回复于

相关问题