Javascript 数据中具有相同值的d3刻度的错误使用？

我是d3新手，使用d3创建一个简单的图表，使用数字数组，其中值“16”出现两次

它为第二个'16'值生成一个'missing'rect'元素的图表，当我检查html时，我发现两个'16'rect的'y'值相同，为72

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

代码：

---

设置矩形的

y

属性的方式将对所有重复元素使用相同的值。可以使用一些偏移，如：

chart.selectAll("rect")
    .data(data)
    .enter().append("rect")
    .attr("y", function (d, i) {
       return (i * y.rangeBand()) + y.rangeBand();})
    .attr("width", x)
    .attr("height", y.rangeBand());

---

此外，您可能需要调整整个图表的高度，以查看所有波段。

代码的问题在于，您试图使用

数据数组中的值来按顺序创建范围波段。因为相同的输入值将始终映射到相同的输出值，这意味着两个输入
16
映射到相同的范围带
72

如果希望每个输入值都映射到自己的“条”，则需要使用数组索引而不是数组值

首先准备索引

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

然后使用它们定义
y
scale域

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());

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

下面是一个JSFIDLE演示：

完整代码：

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());

@奥利维：如果这里给出的任何答案对你有用，那么你应该投票并接受其中一个。
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());