使用 d3js 重新排序 svg dom

Question

我正在使用 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();
}

我的理解是函数中的最后一行，circle.order()，应该重新排序 svg dom 中的节点以匹配数据的顺序。但是，我改变了数组顺序，再次调用了更新函数，它似乎并没有做任何事情。

jsfiddle 演示：http://jsfiddle.net/du7mh/

我需要控制 dom 顺序以将某些元素带到前台，因为 svg 中没有 z-index。任何帮助将不胜感激，谢谢！

Answer 1

更新运行一次后，附加选择中没有任何内容。将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();
}

http://jsfiddle.net/du7mh/3/