D3js v3 到 v4 迁移合并

Question

当我尝试将我的 d3js 图形从版本 3 迁移到版本 4 时遇到了一些问题。我已经解决了很多问题，但我不明白“合并”是如何工作的。 在此代码中，数据标题属性未在 V4 中设置并且上下文菜单不起作用。 有什么问题？ 我不明白合并是如何工作的。 有人可以解释我如何修复此代码以及为什么我必须以这种方式修复它，因为我有更多的图形需要修复。

    var slice = self.svg.select(".slices").selectAll("path.slice")
        .data(pie(new_node_data), key);

    slice.enter()
        .insert("path")
        .attr("class", "slice").attr("fill", function(d2) { return color(d2.data.name);} )
        .merge(slice) //<-- merge back in update selection
        .transition().duration(1000).attrTween("d", tweenIn);

    slice.attr('data-title',function(d){
        return d.data.period + ' ' + d.data.name;
    })

    slice.on("contextmenu", function(d,i){
        console.log(d.data);
        self.context_menu(d.data, i, false);
    });
    self.attach_graph_items_click_event_handler(slice, false, true);

Answer 1

你错过了一些简单的东西，在你合并后你没有保存合并的update + enter到一个变量（你错过了slice = ）：

slice = slice.enter() //<-- SAVE IT TO A VARIABLE
  .insert("path")
  .attr("class", "slice").attr("fill", function(d2) { return color(d2.data.name);} )
  .merge(slice)
  ....

这是它的评论：

// this is your update selection
// slice is a selection of all the things being updated
// in your collection path.slice
var slice = self.svg.select(".slices").selectAll("path.slice")
  .data(pie(new_node_data), key);

// .enter returns the enter selection
// all the things that are being added
slice = slice.enter()
  .insert("path")
  .attr("class", "slice").attr("fill", function(d2) { return color(d2.data.name);} )
  // this merges the update slice with the enter slice
  .merge(slice)
  // this is now operating on enter + update
  .transition().duration(1000).attrTween("d", tweenIn);