Question

我正在努力让V4中的常规更新模式起作用，尽管我相信我理解merge()的新工作方式。我遇到了奇怪的结果。这是我的更新功能：

function update(data) {

    //I create and empty selection, and use the key function with an ID string
    //in my dsv data.
    var bubs = dataLr.selectAll(".data-bub")
        .data(data, function(d) {
            return d.id || (d.id = ++i);
        });

    //remove any that dont need to be there.
    //The first time around there wont be any nodes in the exit, but no matter.
    bubs.exit()
        .transition(tIntro)
        .style("opacity", 0)
        .each(function(d) {
            //Log out the removed elements.
            console.log(d.id);
        })
        .remove();

    bubs.enter() //add any new ones - a group and a circle within it.
        .append("g")
        .classed("data-bub", true)
        .on("click", function(d) {
            console.log(d);
        })
        .append("circle")
        .attr("r", 20)
        .classed("bub", true)
        .merge(bubs);//here I merge the enter with the update.


    //Now I should be able to run this transition that 
    //moves each group to a random location on my svg.
    //But nothing happens. Why is the update selection empty after merge?
    bubs.transition(tIntro)
        .attr("transform", function(d, i) {
            ///console.log(i);
            var y = Math.random() * gHeight;
            var x = Math.random() * gWidth;
            return "translate(" + x + "," + y + ")";
        });

}

此外，另一个奇怪的事情不断发生。目前我正在运行此功能而不更改数据。因此，exit()或enter()不应删除任何元素。然而，每次删除并重新添加两个随机的？什么魔鬼？

Answer 1

.merge()不会更改选择 - 在d3v4选择中是不可变的。因此，一旦声明，选择将始终保持不变，除非您重新定义它。如果您的初始selectAll方法返回空选项，则bubs在udpate选择中将没有任何内容 - 直到您重新定义bubs。所有合并都是：

返回将此选择与指定值合并的新选择其他选择。（docs）

如果您只是添加g个元素，那么您可以使用：

bubs.enter() 
    .append("g")
    .merge(bubs)
    // apply transition to enter and update selection
    .transition()...

或者，使用merge返回的选择重新定义bubs：

bubs = bubs.enter() 
    .append("g")
    .merge(bubs);

// apply transition to enter and update selection
bubs.transition()....

但是您的代码会遇到问题，因为您有两种不同类型的元素可供选择：selectAll(".data-bub")的初始选择 - 根据您的代码选择g元素，以及选择输入的圈子：

bubs.enter()         
    .append("g")               // return entered g elements
    .classed("data-bub", true) // return entered g elements with class data-bub
    .append("circle")          // return entered circles
    .merge(bubs);              // return entered circles with initially selected g elements

如果您对合并元素应用转换，则转换将不均匀地应用 - 在更新的情况下应用于父g元素，在进入的情况下应用于子circle元素。这可能会导致意外结果（例如，如果您还有子文本元素）。要解决此问题（并将转换应用于输入和更新的g元素），您可以尝试以下方式：

    var bubs = dataLr.selectAll(".data-bub")
        .data(data, function(d) { return d.id || (d.id = ++i); });

    // remove as before
    bubs.exit()
       .remove();

   // enter new groups
   var enter = bubs.enter()  
      .append("g")
      .classed("data-bub", true);

   // append circles to the new groups
   enter.append("circle")
        .attr("r", 20)
        .classed("bub", true)

   // merge enter and update, apply transition
   enter.merge(bubs)
      .transition()....

D3.enter（）。merge（）不起作用

1 个答案: