数据中使用相同值的d3比例错误使用？

Question

我是d3的新手并使用它来创建一个使用数字数组的简单图表,其中值"16"在其中出现两次.

它为第二个'16'值生成一个'缺失''rect'元素的图表,当我检查html时,我看到两个'16'rect具有相同的'y'值72.

请告诉我我做错了什么,谢谢

码:

var data = [4, 8, 15, 16, 23, 16];

var chart = d3.select("body").append("svg")
     .attr("class", "chart")
     .attr("width", 420)
     .attr("height", 20 * data.length);


var x = d3.scale.linear()
     .domain([0, d3.max(data)])
     .range([0, 420])

var y = d3.scale.ordinal()
     .domain(data)
     .rangeBands([0, 120]);

chart.selectAll("rect")
     .data(data)
     .enter().append("rect")
     .attr("y", y)
     .attr("width", x)
     .attr("height", y.rangeBand());

Answer 1

您的代码的问题在于您尝试使用data数组中的值来按顺序创建范围带.由于相同的输入值将始终映射到相同的输出值,这意味着两个输入16都映射到相同的范围带72.

如果您希望将每个输入值映射到其自己的"bar",则需要使用数组索引而不是数组值.

首先准备指数

var indices = d3.range(0, data.length);    // [0, 1, 2, ..., data.length-1]

然后使用它们来定义y比例域

var y = d3.scale.ordinal()
    .domain(indices)
    // use rangeRoundBands instead of rangeBands when your output units
    // are pixels (or integers) if you want to avoid empty line artifacts
    .rangeRoundBands([0, chartHeight]);  

最后,不是使用数组值作为输入,而是在映射时使用数组索引 y

chart.selectAll("rect")
    .data(data)
    .enter().append("rect")
    .attr("y", function (value, index) { 
        // use the index as input instead of value; y(index) instead of y(value)
        return y(index); 
    })
    .attr("width", x)
    .attr("height", y.rangeBand());

作为额外的奖励,如果数据量发生变化或者您决定更改图表宽度或高度,此代码将自动重新缩放图表.

这是一个jsFiddle演示:http://jsfiddle.net/q8SBN/1/

完整代码:

var data = [4, 8, 15, 16, 23, 16];
var indices = d3.range(0, data.length);

var chartWidth = 420;
var chartHeight = 120;

var chart = d3.select("body").append("svg")
     .attr("class", "chart")
     .attr("width", chartWidth)
     .attr("height", chartHeight);

var x = d3.scale.linear()
     .domain([0, d3.max(data)])
     .range([0, chartWidth])

var y = d3.scale.ordinal()
     .domain(indices)
     .rangeRoundBands([0, chartHeight]);

chart.selectAll("rect")
    .data(data)
    .enter().append("rect")
    .attr("y", function (value, index) { return y(index); })
    .attr("width", x)
    .attr("height", y.rangeBand());