使用d3js重新排序svg dom

我正在使用d3渲染svg。我有一个对象数组，每个对象都有一个颜色属性，如下所示：

data = [{'color': 'red'}, {'color': 'blue'}];

function update(data) {
    var circle = svg.selectAll('circle').data(data, function(d) {return d.color})
        .enter()
        .append('circle').attr('r', 50)
        .attr('cx', function (d, i) {return 50 + (i * 50)}).attr('cy', 50)
        .attr('fill', function (d) {return d.color});
    circle.order();
}

我有一个更新功能，可以用这些颜色画圆圈，如下所示：

data = [{'color': 'red'}, {'color': 'blue'}];

function update(data) {
    var circle = svg.selectAll('circle').data(data, function(d) {return d.color})
        .enter()
        .append('circle').attr('r', 50)
        .attr('cx', function (d, i) {return 50 + (i * 50)}).attr('cy', 50)
        .attr('fill', function (d) {return d.color});
    circle.order();
}

我的理解是，函数的最后一行circle.order（）应该对svg dom中的节点重新排序，以匹配数据的顺序。但是，我更改了数组顺序并再次调用update函数，它似乎什么都没做

JSFIDLE演示：

---

我需要控制dom顺序，以便将某些元素放到前台，因为svg中没有z索引。任何帮助都将不胜感激，谢谢

更新运行一次后，追加选择中没有任何内容。将

circle

设置为等于当前元素和新元素的值：

function update(data) {
    var circle = svg.selectAll('circle').data(data, function(d) {return d.color});
    circle.enter()
        .append('circle').attr('r', 50)
        .attr('cx', function (d, i) {return 50 + (i * 50)}).attr('cy', 50)
        .attr('fill', function (d) {return d.color});
    circle.order();
}

---

您需要使用输入-退出更新选项。迈克看。或者，作弊的方法是在你发布的提琴的更新函数顶部选择all（“圆圈”）.remove（）。在svg 2.0中，z-index方法占据了一席之地，但我不知道是否发生了这种情况——在google groupsWoops中，我想这只是一个链接灾难！谢谢你的帮助。