D3.js力导向图g元素节点无法拖拽及位置异常问题求助

我帮你排查了代码里的两个关键问题，这正是导致节点无法拖拽、链接端点不匹配的原因，下面是具体的修复方案和解释：

问题分析 #

1. 拖拽事件绑定与选择集引用错误：你在join的enter回调里重新赋值了node变量，这会覆盖外部的节点选择集，导致后续ticked函数操作的不是完整的g元素集合；另外重复绑定拖拽事件也可能引发冲突。
2. 力导向链接的ID匹配逻辑错误：你用节点的index来匹配forceLink的ID，但节点数组被重新映射后，index和原始ID数组的对应关系可能出现偏差，导致链接无法正确关联节点。

修复步骤 #

1. 修正力导向链接的ID匹配逻辑 #

把forceLink的id函数改成直接返回节点的id属性，这样能精准匹配链接的source和target：

const forceLink = d3.forceLink(links).id(d => d.id);

2. 修复节点选择集与拖拽绑定 #

去掉join回调里对node变量的覆盖，保持选择集的正确引用，并且只在g元素上绑定一次拖拽事件：

const node = svg
  .selectAll(".circle-group")
  .data(nodes)
  .join(enter => {
    // 创建g元素并绑定拖拽
    const group = enter.append("g")
      .attr("class", "circle-group")
      .call(drag(simulation));

    // 添加circle元素
    group.append("circle")
      .attr("class", "background")
      .style("fill", "blue")
      .attr("r", 30);

    // 添加text元素，直接用节点id显示
    group.append("text")
      .attr("class", "foreground")
      .attr("dx", -20)
      .style('font-size', 30 * 0.4 + 'px')
      .text(d => d.id);

    group.attr("stroke", "grey");
    return group; // 返回g元素给join方法，确保选择集完整
  });

3. 确认ticked函数的transform更新 #

你原来的ticked函数里更新g元素transform的代码是正确的，只要选择集正确就能生效，这里可以简化写法：

function ticked() {
  link
    .attr("x1", d => d.source.x)
    .attr("y1", d => d.source.y)
    .attr("x2", d => d.target.x)
    .attr("y2", d => d.target.y);

  node
    .attr("transform", d => `translate(${d.x}, ${d.y})`);
}

完整修复后的代码 #

ForceGraph(){ 
  var links = [ 
    {src:"John",target:"Aurora"}, 
    {src:"John",target:"Mary"}, 
    {src:"John",target:"Erik"}, 
    {src:"John",target:"Susan"}, 
    {src:"John",target:"Mel"}, 
  ] 
  var nodes = [ 
    {id:"John"}, 
    {id:"Aurora"}, 
    {id:"Mary"}, 
    {id:"Erik"}, 
    {id:"Susan"}, 
    {id:"Mel"}, 
  ] 
  var width = this.$refs.mapFrame.clientWidth // scale to parent container 
  var height = this.$refs.mapFrame.clientHeight // scale to parent container 

  // Compute values. 
  var nodeId = d => d.id // given d in nodes, returns a unique identifier (string) 
  const N = d3.map(nodes, nodeId); 
  const nodeTitle = (_, i) => N[i]; 
  const T = d3.map(nodes, nodeTitle); 

  // Replace the input nodes and links with mutable objects for the simulation. 
  nodes = nodes.map(n => Object.assign({}, n)); 
  links = links.map(l => ({ orig: l, source: l.src, target: l.target })); 

  // Construct the forces. 
  const forceNode = d3.forceManyBody(); 
  const forceLink = d3.forceLink(links).id(d => d.id);
  forceNode.strength(-450); 
  forceLink.strength(1); 
  forceLink.distance(100) 

  const simulation = d3.forceSimulation(nodes) 
    .force("link", forceLink) 
    .force("charge", forceNode) 
    .force("x", d3.forceX()) 
    .force("y", d3.forceY()) 
    .on("tick", ticked); 

  const svg = d3.create("svg") 
    .attr("id", "svgId") 
    .attr("preserveAspectRatio", "xMidYMid meet") 
    .attr("viewBox", [-width/2,-height/2, width,height]) 
    .classed("svg-content-responsive", true) 

  const link = svg.append("g") 
    .selectAll("line") 
    .data(links) 
    .join("line")
    .attr("stroke", "white") 
    .attr("stroke-width", "5"); 

  const node = svg 
    .selectAll(".circle-group") 
    .data(nodes) 
    .join(enter => {
      const group = enter.append("g")
        .attr("class", "circle-group")
        .call(drag(simulation));

      group.append("circle")
        .attr("class", "background")
        .style("fill", "blue")
        .attr("r", 30);

      group.append("text")
        .attr("class", "foreground")
        .attr("dx", -20)
        .style('font-size', 30 * 0.4 + 'px')
        .text(d => d.id);

      group.attr("stroke", "grey");
      return group;
    }); 

  function ticked() { 
    link 
      .attr("x1", d => d.source.x) 
      .attr("y1", d => d.source.y) 
      .attr("x2", d => d.target.x) 
      .attr("y2", d => d.target.y); 

    node 
      .attr("transform", d => `translate(${d.x}, ${d.y})`); 
  } 

  function drag(simulation) { 
    function dragstarted(event) { 
      if (!event.active) simulation.alphaTarget(0.3).restart(); 
      event.subject.fx = event.subject.x; 
      event.subject.fy = event.subject.y; 
    } 
    function dragged(event) { 
      event.subject.fx = event.x; 
      event.subject.fy = event.y; 
    } 
    function dragended(event) { 
      if (!event.active) simulation.alphaTarget(0); 
      event.subject.fx = null; 
      event.subject.fy = null; 
    } 
    return d3.drag() 
      .on("start", dragstarted) 
      .on("drag", dragged) 
      .on("end", dragended); 
  } 

  return Object.assign(svg.node() ); 
}

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