D3 Y 比例，y 与高度？

Question

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

变量 w = 600; 变量 h = 100; var 数据集 = [1, 6, 3, 4, 10, 4, 9] var svg = d3.select("body").append("svg") .attr("高度", h) .attr("宽度", w) var xScale = d3.scale.linear() .domain([0, dataset.length]) .range([0, w]);

使用高度属性：

var yScale = d3.scale.linear() .domain([0, d3.max(数据集)]) .range([h, 0]); svg.selectAll("矩形") .data（数据集） 。进入（） .append("矩形") .attr({ x: function(d, i) { return xScale(i); }, y: function(d) { return yScale(d); }, 宽度：w / dataset.length， 高度：函数（d）{返回h-yScale（d）； }, 填写：“青色” });

或者设置y：

var yScale = d3.scale.linear() .domain([0, d3.max(数据集)]) .range([0, h]); svg.selectAll("矩形") .data（数据集） 。进入（） .append("矩形") .attr({ x: function(d, i) { return xScale(i); }, y: function(d) { return h - yScale(d); }, 宽度：w / dataset.length， 高度：函数（d）{返回yScale（d）； }, 填写：“青色” });

其中一个更正确，如果正确，为什么？

Answer 1

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

这通常不是人们想要的。