Question

我尝试使用最新版本的d3.js来模仿这个collapsible tree，但是我遇到了一些问题。

代码的WebUI.addAlertInfo();部分执行得很好，但无论出于何种原因，nodeEnter代码的转换部分都不会执行。我查看控制台以确保它不仅仅是一个可见性问题，我没有错误，没有任何错误......坐标保持与它们由nodeUpdate部分启动时相同码。我唯一的猜测是，新版本的d3.js发生了一些变化，我错过了一些东西......

＆＃13;

nodeEnter

＆＃13;

PS：我的代码不是上面链接的精确复制品，在设计时我自己旋转......

Answer 1

从v3到v4的输入和更新选择已经发生了概念上的变化。在v3中，输入选择自动合并到更新选择中，您必须从v4向上明确地调用selection.merge()以获得相同的结果。

v3 selection.enter()的文档告诉我们：

在追加或插入时，回车选择会合并到更新选择。

另一方面，v4的相同方法的文档为：

输入选择通常仅用于追加元素，并且在追加后通常merged带有更新选择，这样修改就可以应用于输入和更新元素。

使用v3看看这个简化的例子，它应该没有任何意外：

＆＃13;

var update = d3.select("svg").selectAll("circle")
  .data([1]);
  
var enter = update.enter()
  .append("circle")
    .attr("cx", "50")
    .attr("cy", "50")
    .attr("r", "20")
    .attr("fill", "red");
    
 update
   .transition().duration(2000)
     .attr("fill", "blue");

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<svg></svg>

＆＃13;

对v4做同样的事情需要稍加修改，但是：

＆＃13;

var update = d3.select("svg").selectAll("circle")
  .data([1]);
  
var enter = update.enter()
  .append("circle")
    .attr("cx", "50")
    .attr("cy", "50")
    .attr("r", "20")
    .attr("fill", "red");
    
 update
   .merge(enter)  // This merges both the enter and the update selection
   .transition().duration(2000)
     .attr("fill", "blue");

＆＃13;

<script src="https://d3js.org/d3.v4.min.js"></script>

<svg></svg>

＆＃13;

注释掉.merge()行会显示您描述的效果，因为更新选择将为空，即使您之前使用输入选择输入了新元素。

D3.js v4.0.0-alpha.35转换不起作用

1 个答案: