如何在D3.js的Tidy图表中添加红色连接线连接节点D与B？

当然可以添加节点D到节点B的红色连接线，核心思路是手动创建这条额外的连线元素，利用节点的坐标数据生成路径。具体实现步骤如下：

• 定位目标节点：从树形图的节点数据中筛选出B和D的节点对象，获取它们的坐标信息：

  // 假设nodes是存储所有节点数据的数组
  const nodeB = nodes.find(d => d.data.name === 'B');
  const nodeD = nodes.find(d => d.data.name === 'D');
  

• 绘制自定义连线：找到你用来渲染树形连线的SVG组（通常是svg.append('g')创建的link容器），添加新的路径元素：

  // 假设linkGroup是存放所有连线的SVG组
  const linkGenerator = d3.linkHorizontal() // 横向树形图用这个，纵向布局替换为linkVertical
    .x(d => d.x)
    .y(d => d.y);
  
  linkGroup.append('path')
    .attr('class', 'custom-link')
    .attr('d', linkGenerator({ source: nodeD, target: nodeB }))
    .attr('stroke', 'red')
    .attr('stroke-width', 2)
    .attr('fill', 'none');
  

• 适配动态更新：如果你的树形图支持缩放、拖拽或数据更新，需要在更新逻辑中同步更新这条自定义连线的路径：

  // 在节点位置更新后执行
  linkGroup.select('.custom-link')
    .attr('d', linkGenerator({ source: nodeD, target: nodeB }));
  

内容的提问来源于stack exchange，提问作者morteza mortezaie