D3.js链接两个适合文本大小的矩形

// 创建SVG容器
var svg = d3.select("body")
  .append("svg")
  .attr("width", 400)
  .attr("height", 200);

// 创建第一个矩形
var rect1 = svg.append("rect")
  .attr("x", 50)
  .attr("y", 50)
  .attr("width", 100)
  .attr("height", 50)
  .attr("fill", "blue");

// 创建第二个矩形
var rect2 = svg.append("rect")
  .attr("x", 250)
  .attr("y", 50)
  .attr("width", 100)
  .attr("height", 50)
  .attr("fill", "red");

// 创建文本
var text = svg.append("text")
  .attr("x", 200)
  .attr("y", 100)
  .attr("text-anchor", "middle")
  .attr("alignment-baseline", "middle")
  .text("Link");

// 创建连接线
var line = svg.append("line")
  .attr("x1", 150)
  .attr("y1", 75)
  .attr("x2", 250)
  .attr("y2", 75)
  .attr("stroke", "black");

// 创建箭头
var arrow = svg.append("path")
  .attr("d", "M250,75 L245,70 L245,80 Z")
  .attr("fill", "black");

// 添加交互效果
rect1.on("mouseover", function() {
  rect1.attr("fill", "green");
});

rect1.on("mouseout", function() {
  rect1.attr("fill", "blue");
});

rect2.on("mouseover", function() {
  rect2.attr("fill", "yellow");
});

rect2.on("mouseout", function() {
  rect2.attr("fill", "red");
});