javascript - 如何在不触及其他元素的情况下更新 d3 中的单个数据点？

Question

我想更新单个数据点并仅修改它绑定(bind)到的元素，但我不知道如何执行此操作。

This article似乎表明 var sel = svg.selectAll(...).data(...)给出更新数据的选择，然后 sel.enter(...)代表新数据，之后sel代表更新+新数据。

在 this jsfiddle example ，我将新元素着色为绿色，将更新元素着色为蓝色，但似乎每个现有元素都着色为蓝色，而不仅仅是自上次更新以来更改的元素。如何更新单条数据？

// ...

function update() {
    // clear old classes
    svg.selectAll("text").attr("class","");

    // join to the new data
    var sel = svg.selectAll("text").data(things);

    // update -- but this actually affects all elements in the selection?
    sel.attr("class","update");

    // enter
    sel.enter()
        .append("text")
        .attr("class","enter")
        .attr("x", function(d,i) { return 20*i; })
        .attr("y", 20);

    // update + enter
    sel.text(function(d) { return d; });

    // exit
    sel.exit().remove();
}

Answer 1

正如您所发现的，“更新”选择包括所有现有元素，随时可以更新，无论数据是否实际发生更改。

如果你想测试新数据与旧数据是否相同或不同，你需要一种方法来保存旧数据以与新数据进行比较。然后，您可以使用选择过滤器来丢弃数据相同的元素。

我已经讨论过这个问题 previously on the d3 mailing list 。这是我想出的方法:

selection = selection.property(" __oldData__", function(d){ return d; } ); 
  //store the old data as a property of the node
                    .data(newData);  
  //over-write the default data property with new data

selection.enter() /*etc*/;  //handle new elements

selection.filter( function(d) {    
  //test whether the relevant properties of d match the equivalent in the oldData
  //also test whether the old data exists, to catch the entering elements!
                 return ( (this.__oldData__ ) && 
                          (d.value != this.__oldData__.value) );
            })
            .style("fill", "blue");

selection.property("__oldData__", null);     
  //delete the old data once it's no longer needed

您当然可以为旧数据属性使用任何名称，只是按照惯例在其周围添加大量“_”字符以避免弄乱浏览器的任何 native DOM 属性。之后您不需要删除oldData(下次更新时它会被覆盖)，但如果您更新不频繁，它可以节省内存以显式释放它。

请注意，selection.filter() 不会保留索引值。如果您需要跟踪 i，您可以添加一个额外的步骤来在过滤之前将索引保存为单独的属性(元素或数据对象的)，或者您可以跳过过滤器并直接在 style/attr 调用中的函数中进行测试。

编辑:我已经更改了相对于链接讨论的过滤器函数，以便它仅包含更新的元素，而不是新的或> 更新的元素。无论哪种方式，过滤器都会选择过滤器函数返回 true 的元素。