D3 v4带拖拽缩放的力导向图添加边标签失败求助

Hey there! Let's figure out why your edge labels broke the force-directed graph. I spot a few key issues in your implementation—let's walk through them one by one:

1. Wrong Element Hierarchy #

You appended edgepaths and edgelabels directly to the root <svg> element, but your nodes and links live inside the g container that handles zoom transforms. This means the labels won't scale/zoom with the rest of the graph, and can cause layout conflicts. Always add graph-related elements to the same g container.

2. Initial Edge Path Calculation Uses Uninitialized Node Positions #

When you first create edgepaths, you're trying to use d.source.x and d.source.y—but at that point, the force simulation hasn't run yet, so these values don't exist. You need to initialize the path with a placeholder, then update it in the ticked function.

3. Data Linking Issue (Critical!) #

Your JSON edges use string IDs for source and target, but D3's force simulation expects references to the actual node objects. Without converting these strings to node references, accessing d.source.x will throw errors, breaking the entire simulation.

4. Missing Force Simulation Initialization #

Your base code doesn't show the force simulation setup—make sure you're initializing it properly and binding the ticked function to its tick event.

Here's the fixed code with all these issues addressed:

// Setup SVG and zoom container
const svg = d3.select("#svgdiv")
  .append('svg')
  .attr('width', width)
  .attr('height', height)
  .style("border", "1px solid black");

const width = +svg.attr("width");
const height = +svg.attr("height");

svg.append("rect")
  .attr("width", width)
  .attr("height", height)
  .style("fill", "black")
  .style("pointer-events", "all")
  .call(d3.zoom()
    .scaleExtent([1 / 2, 4])
    .on("zoom", zoomed));

const g = svg.append("g");

function zoomed() {
  g.attr("transform", d3.event.transform);
}

// --- Process data: convert edge source/target strings to node references ---
graph.edge.forEach(edge => {
  edge.source = graph.node.find(node => node.id === edge.source);
  edge.target = graph.node.find(node => node.id === edge.target);
});

// --- Initialize force simulation ---
const simulation = d3.forceSimulation(graph.node)
  .force("link", d3.forceLink(graph.edge).id(d => d.id).distance(100))
  .force("charge", d3.forceManyBody().strength(-300))
  .force("center", d3.forceCenter(width / 2, height / 2))
  .on("tick", ticked);

// --- Create links ---
const link = g.append("g")
  .attr("class", "links")
  .selectAll("line")
  .data(graph.edge)
  .enter().append("line")
  .attr("stroke-width", d => Math.sqrt(d.value))
  .attr("id", (d, i) => 'edge' + i);

// --- Create nodes ---
const node = g.append("g")
  .attr("class", "nodes")
  .selectAll("circle")
  .data(graph.node)
  .enter().append("circle")
  .attr("r", 10) // Adjust radius value as needed
  .attr("fill", d => d3.schemeCategory10[d.group]) // Adjust color logic as needed
  .on("click", mouseClick(.2)) // Ensure mouseClick is defined
  .on("dblclick", mouseDblClick) // Ensure mouseDblClick is defined
  .call(d3.drag()
    .on("start", dragstarted)
    .on("drag", dragged)
    .on("end", dragended));

// --- Create edge paths (for labels) - added to the same g container ---
const edgepaths = g.selectAll(".edgepath")
  .data(graph.edge)
  .enter()
  .append('path')
  .attr({
    'd': d => `M ${width/2} ${height/2} L ${width/2} ${height/2}`, // Placeholder path
    'class': 'edgepath',
    'fill-opacity': 0,
    'stroke-opacity': 0,
    'fill': 'green',
    'stroke': 'yellow',
    'id': (d, i) => 'edgepath' + i
  })
  .style("pointer-events", "none");

// --- Create edge labels - added to the same g container ---
const edgelabels = g.selectAll(".edgelabel")
  .data(graph.edge)
  .enter()
  .append('text')
  .style("pointer-events", "none")
  .attr({
    'class': 'edgelabel',
    'id': (d, i) => 'edgelabel' + i,
    'dx': 80,
    'dy': 0,
    'font-size': 10,
    'fill': 'white'
  });

edgelabels.append('textPath')
  .attr('xlink:href', (d, i) => '#edgepath' + i)
  .style("pointer-events", "none")
  .text((d, i) => `label ${i}`);

// --- Ticked function (updated to handle all elements) ---
function ticked() {
  node
    .attr("cx", d => d.x)
    .attr("cy", d => d.y);

  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);

  // Update edge paths with current node positions
  edgepaths.attr('d', d => `M ${d.source.x} ${d.source.y} L ${d.target.x} ${d.target.y}`);

  // Rotate labels if needed
  edgelabels.attr('transform', function(d) {
    if (d.target.x < d.source.x) {
      const bbox = this.getBBox();
      const rx = bbox.x + bbox.width / 2;
      const ry = bbox.y + bbox.height / 2;
      return `rotate(180 ${rx} ${ry})`;
    } else {
      return 'rotate(0)';
    }
  });
}

// --- Drag functions (D3 v4 compatible) ---
function dragstarted(event, d) {
  if (!event.active) simulation.alphaTarget(0.3).restart();
  d.fx = d.x;
  d.fy = d.y;
}

function dragged(event, d) {
  d.fx = event.x;
  d.fy = event.y;
}

function dragended(event, d) {
  if (!event.active) simulation.alphaTarget(0);
  d.fx = null;
  d.fy = null;
}

// Assume these functions are defined with your custom logic
function mouseClick(scale) {
  return function(event, d) {
    // Your click handling code here
  }
}

function mouseDblClick(event, d) {
  // Your double-click handling code here
}

A few key fixes to note:

• Moved edgepaths and edgelabels into the g container so they inherit zoom transforms
• Added data processing to convert edge source/target IDs to node objects
• Initialized edge paths with a placeholder (since node positions aren't ready on load)
• Properly set up the force simulation and bound the ticked function
• Updated D3 v4 drag functions to use the event object (aligns with v4 API changes)

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