Question

我正在尝试对DOM中的元素重新排序以进行D3（v4）选择。此D3选择不断引入新元素，删除旧元素，并保留一些元素，我对每个特定组进行处理（并进行过渡等）。

最后，我想对DOM元素重新排序，以便某些元素位于前台，但是我总是收到D3抛出的“ TypeError：u.parentNode未定义”。

function updateDraw() {
    var items = getItems();
    var s = mySVG.selectAll('g').data(items, d => d.id);

    // the new items that weren't there before
    var enter = s
        .enter()
        .append('g');

    enter
        .append('circle')
        // more here

    // the items that were there before
    s.selectAll('circle')
        .transition()
        // more here

    // stuff in common with all items (newly added or still there)
    enter.merge(s)
        .selectAll('circle')
        // more here

    // the items that are no longer there
    s.exit()
        .selectAll('circle')
        // more here

    // re-order the DOM to match our new order for everything that is still there
    s.enter().merge(s).sort((a,b) => { .... });
    s.enter().merge(s).order();
}

即使我删除了排序行，并尝试按照默认顺序对元素进行排序，我也会遇到相同的错误。如果我没有任何sort()或order()行，则页面加载和运行都非常好，只是我的圈子排列不正确。

知道这里发生了什么吗？我不能仅在执行任何D3操作之前对items进行排序，因为页面上已经存在的某些DOM元素将需要重新排序。

Answer 1

糟糕，我的错误是尝试重新使用enter（）选择，该选择仅应调用一次才能将数据绑定一次。由于我将回车选择保存在enter下，

enter.merge(s).sort(...)

工作正常。

调用d3.sort或d3.order

1 个答案: