D3节点与连线在IE11及Edge浏览器中的渲染异常问题求助

看起来你遇到的是典型的旧浏览器兼容性问题，IE11和旧版Edge对ES6+特性以及部分SVG API的支持和Chrome差得不少，咱们一步步来排查解决：

1. 先确认你的D3版本是否兼容IE11 #

D3 v5及以上版本大量使用了IE11不支持的ES6特性（比如箭头函数、Promise、Array.prototype.find等），如果你的项目用的是v5+，要么降级到D3 v4（它对IE11的兼容性更好），要么给页面引入ES6兼容的polyfill（比如core-js），把这些新特性转换成IE能识别的代码。

2. 检查箭头连线的更新逻辑是否绑定正确 #

Chrome里箭头能跟着动，说明你的更新逻辑在现代浏览器里没问题，但IE里没触发，大概率是拖动事件里的连线更新代码有兼容性问题：

• 首先，把代码里的箭头函数全部换成普通function，IE11完全不支持箭头函数，比如node.on("drag", () => {...})要改成node.on("drag", function(d) {...})。
• 确保拖动事件中，不仅更新节点的cx/cy，还要遍历所有关联的连线（包括从当前节点出发的和指向当前节点的），重新计算路径的d属性：

  node.on("drag", function(d) {
    // 更新当前节点位置
    d.x = d3.event.x;
    d.y = d3.event.y;
    d3.select(this).attr("cx", d.x).attr("cy", d.y);
  
    // 更新从当前节点出发的所有连线
    d.transitions.forEach(function(transition) {
      const start = [d.x, d.y];
      const midPoint = [transition.points[0].x, transition.points[0].y];
      const end = [transition.target.x, transition.target.y];
      // 重新生成路径字符串
      const pathD = `M${start[0]},${start[1]} L${midPoint[0]},${midPoint[1]} L${end[0]},${end[1]}`;
      // 找到对应的连线元素更新d属性（这里假设你给每条连线加了唯一id）
      d3.select(`#transition-${transition.id}`).attr("d", pathD);
    });
  
    // 更新指向当前节点的所有连线
    window.states.forEach(function(otherNode) {
      otherNode.transitions.forEach(function(transition) {
        if (transition.target === d) {
          const start = [otherNode.x, otherNode.y];
          const midPoint = [transition.points[0].x, transition.points[0].y];
          const end = [d.x, d.y];
          const pathD = `M${start[0]},${start[1]} L${midPoint[0]},${midPoint[1]} L${end[0]},${end[1]}`;
          d3.select(`#transition-${transition.id}`).attr("d", pathD);
        }
      });
    });
  });
  

3. 排查SVG箭头标记（marker）的兼容性 #

IE11对SVG marker的某些属性支持有坑：

• 确保marker的orient属性设为auto，不要用auto-start-reverse，旧Edge和IE11对这个值的解析有问题。
• marker的refX/refY要设合理的值，避免箭头显示位置偏移。比如：

  svg.append("defs")
    .append("marker")
    .attr("id", "arrowhead")
    .attr("viewBox", "0 -5 10 10")
    .attr("refX", 15) // 调整这个值让箭头刚好贴在连线末端
    .attr("refY", 0)
    .attr("markerWidth", 6)
    .attr("markerHeight", 6)
    .attr("orient", "auto") // 关键：用auto代替auto-start-reverse
    .append("path")
    .attr("d", "M0,-5L10,0L0,5");
  

• 连线元素要正确引用marker：attr("marker-end", "url(#arrowhead)")，注意IE11里url的引号不能省略。

4. 事件处理的兼容性调整 #

IE11的事件模型和Chrome有差异，如果你用了d3.mouse()或者d3.touch()，可以换成d3.event.clientX/d3.event.clientY来获取坐标，或者确保你的drag行为初始化正确：

const drag = d3.drag()
  .on("drag", function(d) {
    // 这里的d3.event在IE11里应该能正常获取x/y，但如果不行，试试：
    // const mousePos = d3.mouse(svg.node());
    // d.x = mousePos[0];
    // d.y = mousePos[1];
    d.x = d3.event.x;
    d.y = d3.event.y;
    d3.select(this).attr("cx", d.x).attr("cy", d.y);
    // 然后更新连线...
  });

node.call(drag);

5. 避免使用IE不支持的SVG特性 #

比如不要用transform的CSS属性来移动SVG元素，改用SVG原生的transform属性：

// 不好的写法（IE11可能不识别）
d3.select(this).style("transform", `translate(${d.x}px, ${d.y}px)`);
// 正确的写法
d3.select(this).attr("transform", `translate(${d.x}, ${d.y})`);

按照上面的步骤排查调整，应该就能解决IE11和旧Edge里箭头不随节点移动的问题了。

内容的提问来源于stack exchange，提问作者Dibyendu Biswas