[英]D3 Y Scale, y vs height?
我正在学习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" });
或设置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" });
是否更正确?如果是,为什么?
现在,我进入了下一章,似乎是前一个选项,它在创建yAxis时使用range([h, 0])
更好。 如果我使用后一个选项range([0, h])
,则图形如下所示(不对yAxis调用进行任何转换:
通常这不是人们想要的。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.