D3.js圈子顺序

Question

我有以下json数组

{"x" :"7","y" :30,"color" : "green"},{"x" :"8","y" :70, "color" : "purple"},  {"x" :"9","y" :50, "color" : "yellow"},{"x" :"10","y" :60, "color" : "black"} 

但是当我绘制圆圈时，d3.js通过“ y”参数对数组进行排序

示例：正确的顺序应为

    green -> purple -> yellow - black

但是d3.js显示

     green -> yellow -> black -> purple

片段提琴

Answer 1

d3正确显示圆，因为垂直顺序基于其y值，而不是基于数组中的顺序。

您在这里定义：

.attr("cy", function (d) { return d.y; })                       

如果您想按索引顺序绘制圆圈，则可以

.attr("cy", function (d, i) { return i *10 + 100; })                       

在这里，我只是简单地将它们的索引乘以常数（10），以便根据您的要求绘制圆圈。

的jsfiddle