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

摘录Fiddle

Answer 1

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

你在这里定义：

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

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

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

在这里，我简单地将它们的索引与常数（10）相乘，以便在您请求时绘制圆圈。

jsFiddle