D3.js树结构SVG节点位置偏移及子节点添加异常问题

Let's break down and fix your two main issues step by step:

Issue 1: SVG Shapes Misaligned (Positioned Too Low) #

Root Cause #

Your original drawDiamond and drawRect functions used the node's x/y coordinates as the centroid, but the node's <g> element was translated to those same coordinates. Combined with text positioned relative to the <g>'s top-left, this created a misalignment between the shape and text, making the SVG appear lower than expected.

Fix #

Rewrite the shape-drawing functions to render relative to the <g> element's origin (0,0), then adjust text to center within the shape:

// Draw diamond centered at the g element's origin
function drawDiamond() {
  let result = 'M' + 0 + ',' + (-rectH / 2);
  result += 'L' + (rectW / 2) + ',' + 0;
  result += 'L' + 0 + ',' + (rectH / 2);
  result += 'L' + (-rectW / 2) + ',' + 0;
  result += 'Z';
  return result;
}

// Draw rectangle centered at the g element's origin
function drawRect() {
  let result = 'M' + (-rectW / 2) + ',' + (-rectH / 2);
  result += 'h' + rectW;
  result += 'v' + rectH;
  result += 'h-' + rectW;
  result += 'Z';
  return result;
}

Update the node rendering code to use these functions and center the text:

nodeEnter.append('path')
  .attr("d", function(d){
    return d.type === 'decision' ? drawDiamond() : drawRect();
  })
  .attr("stroke-width", 1)
  .attr('class','myPaths')
  .style("fill", "lightsteelblue");

nodeEnter.append("text")
  .attr("x", 0)       // Center text horizontally relative to g element
  .attr("y", 0)       // Center text vertically relative to g element
  .attr("dy", ".35em")
  .attr("text-anchor", "middle")
  .text(function(d) { return d.name; });

Issue 2: New Nodes Stay in Original Position After Addition #

Root Cause #

You were calling update(root) when adding a new node, which used the root as the transition source instead of the selected parent node. Additionally, the new node didn't have initial x0/y0 values, so the transition didn't know where to start from.

Fix #

Modify the addElement function to use the selected parent node as the transition source and initialize the new node's position:

function addElement() {
  if (!selectedNode) return;

  // Create a copy of the empty node with initial transition position
  const newNode = {...emptyDecisionBox};
  newNode.x0 = selectedNode.x;
  newNode.y0 = selectedNode.y;

  // Add the new node to the selected parent's children
  if (!selectedNode.children) selectedNode.children = [];
  selectedNode.children.push(newNode);

  // Update the tree using the selected parent as the source
  update(selectedNode);
}

Bonus: Fix Button Positions (Click Interaction) #

Adjust the button positions to align properly with the centered nodes:

function click(d) {
  selectedNode = d;
  const nodeCenterX = d.x;
  const nodeCenterY = d.y;

  // Right-side buttons
  diamondImage
    .attr('transform', `translate(${nodeCenterX + rectW/2 + 10}, ${nodeCenterY})`)
    .classed('hide', false);
  rectangleShape
    .attr('transform', `translate(${nodeCenterX + rectW/2 + 10}, ${nodeCenterY - 15})`)
    .classed('hide', false);

  // Left-side buttons
  diamondImageFalse
    .attr('transform', `translate(${nodeCenterX - rectW/2 - 50}, ${nodeCenterY})`)
    .classed('hide', false);
  rectangleShapeFalse
    .attr('transform', `translate(${nodeCenterX - rectW/2 - 50}, ${nodeCenterY - 15})`)
    .classed('hide', false);
}

What These Changes Do #

1. Shape Alignment: By drawing shapes relative to the <g> element's origin, the SVG and text now share the same center point, eliminating the offset.
2. Node Transition: Using the selected parent as the update source initializes the new node's transition from the parent's position, ensuring it animates to the correct layout spot.
3. Button Placement: Buttons now sit neatly alongside nodes, making the interaction more intuitive.

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