简体   繁体   English

D3 Y比例尺,y与高度?

[英]D3 Y Scale, y vs height?

I'm learning D3, and I can see that I get the same visualization with these two things: 我正在学习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]);

Using the height attribute: 使用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"
    });

在此处输入图片说明

Or setting y: 或设置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"
    });

在此处输入图片说明

Is either one more correct, if so, why? 是否更正确?如果是,为什么?

Now that I got to a later chapter, it seems like former option, which uses range([h, 0]) is better when creating a yAxis. 现在,我进入了下一章,似乎是前一个选项,它在创建yAxis时使用range([h, 0])更好。 If I use the latter option range([0, h]) , the graph comes out as follows (with no transforms of the yAxis call: 如果我使用后一个选项range([0, h]) ,则图形如下所示(不对yAxis调用进行任何转换:

在此处输入图片说明

Which generally is not what one would want. 通常这不是人们想要的。

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM