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