javascript - D3 Y 比例，y 与高度？

Question

我正在学习 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]);

使用高度属性:

 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"    });

或者设置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"    });

哪个更正确，如果是，为什么？

Answer 1

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

这通常不是人们想要的。