在树的顶部绘制 SVG 路径。无法更新路径答案

【问题标题】：Draw SVG path on top of tree. Cannot update path在树的顶部绘制 SVG 路径。无法更新路径
【发布时间】：2016-09-26 11:27:46
【问题描述】：

我将 D3 折叠树作为here 并想在节点之间绘制一些路径。问题是当树枝折叠时，旧路径没有被删除。类似的解决方案是here，但我做错了。您能否建议我应该如何更新 SVG 路径？

初始化代码，更新路径：

 var path = svg.selectAll('path.sce').data(nodes);
  path.attr('d', lineFunction(nodes))
      .style('stroke-width', 2)
      .style('stroke', 'black')
      .attr('class', 'arrow')
      .attr('fill', 'none')
      .attr('marker-end', 'url(#arrow)');

  path.enter().append('svg:path').attr('d', lineFunction(nodes))
      .style('stroke-width', 2)
      .style('stroke', 'black')
      .attr('class', 'arrow')
      .attr('fill', 'none')
      .attr('marker-end', 'url(#arrow)');

  path.exit().remove();

完整代码 - jsfiddle

【问题讨论】：

标签： javascript d3.js svg

【解决方案1】：

您的问题很简单：要使更新和退出选择起作用，您必须选择在输入选择中设置的相同类：

var path = svg.selectAll('.arrow');

这是你的小提琴：http://jsfiddle.net/odf3q84L/

【讨论】：