Angular适配D3 v4实现共享根双树左右展开异常排查

看起来你遇到的问题核心是左右两棵树的DOM元素选择器没有区分，导致它们互相覆盖了对方的节点和连线数据。下面来拆解问题并给出修复方案：

问题根源分析 #

你在setNodes和setLinks方法中使用了全局选择器：

• 节点选择器：this.svg.selectAll('g.node')
• 连线选择器：this.svg.selectAll('path.link')

当你先调用rightTreeUpdate再调用leftTreeUpdate时，第二次调用的selectAll会选中所有.node和.link元素（包括右侧树刚创建的那些），然后用左侧树的数据覆盖它们的绑定数据，最终只显示左侧树；调换顺序则反之。D3的enter/update/exit模式是基于选择器匹配的，没有区分左右树的元素就会导致数据绑定冲突。

修复方案：给左右树元素添加区分类名 #

我们需要给左右树的节点和连线分别添加不同的类名，让选择器能精准定位各自的元素，避免互相干扰。

1. 修改setNodes方法 #

根据side参数选择对应的节点类名，并在创建节点时添加类：

setNodes(source:any, treeData: any, side: string){
  let nodes = treeData.descendants();
  let treeModel= this;
  const nodeClass = side === 'left' ? 'node-left' : 'node-right'; // 区分左右节点类

  if ( side === 'left') {
    let width = this.width;
    nodes.forEach(function (d) { d.y = (d.depth * -180) });
  } else {
    nodes.forEach(function(d){ d.y = d.depth * 180});
  }

  // 选择对应side的节点，不再用全局.node
  var node = this.svg.selectAll(`g.${nodeClass}`)
    .data(nodes, function(d) { return d.id || (d.id = ++this.i); });

  // --- 节点Enter部分 ---
  var nodeEnter = node.enter().append('g')
    .attr('class', `${nodeClass} node`) // 同时保留node类和区分类
    .attr("transform", function(d) {
      return "translate(" + source.y0 + "," + source.x0 + ")";
    })
    .on('click', function(event, d) { treeModel.click(d, this); });

  // 后续的update/exit逻辑保持不变，但都是基于当前node选择器（已区分左右）
  // ... 省略你的节点更新、退出逻辑
}

2. 修改setLinks方法 #

同理，给连线添加区分类名：

setLinks( source: any, treeData: any, side: string){
  let links = treeData.descendants().slice(1);
  const linkClass = side === 'left' ? 'link-left' : 'link-right'; // 区分左右连线类

  // 选择对应side的连线
  var link = this.svg.selectAll(`path.${linkClass}`)
    .data(links, function(d) { return d.id; });

  // --- 连线Enter部分 ---
  var linkEnter = link.enter().insert('path', "g")
    .attr('class', `${linkClass} link`) // 同时保留link类和区分类
    .attr('d', function(d){
      var o = {x: source.x0, y: source.y0}
      return treeModel.diagonal(o, o)
    });

  // 后续的update/exit逻辑保持不变，基于当前link选择器
  // ... 省略你的连线更新、退出逻辑
}

3. 验证效果 #

修改后，不管你是先调用rightTreeUpdate还是leftTreeUpdate，左右树的元素都会被各自的选择器选中，数据绑定不再冲突，两棵树就能同时显示了。

补充：D3 enter/update/exit的核心逻辑 #

简单再梳理下这三个阶段的作用，帮你理解为什么之前的写法会出问题：

• enter：当绑定的数据数量 > 选中的DOM元素数量时，创建新元素
• update：当绑定的数据数量 = 选中的DOM元素数量时，更新现有元素的属性
• exit：当绑定的数据数量 < 选中的DOM元素数量时，移除多余元素

之前的全局选择器让左右树共享了同一批DOM元素，第二次调用时会把第一次的元素当成自己的update集合，覆盖数据，导致只显示最后处理的那棵树。添加区分类名后，左右树的元素完全独立，就不会有这个问题了。

内容的提问来源于stack exchange，提问作者Red Cricket