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 demo：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/

用d3js重新排序svg dom

1 个答案: