如何在D3.js绘制的矩形各端点处添加圆形？

嘿，作为JavaScript新手能写出这样的D3矩形绘制代码已经很不错啦！完全不需要放弃你现有的矩形实现，咱们可以直接基于每个矩形的坐标数据，在四个端点上绘制小圆点，步骤很简单：

核心思路 #

每个矩形的四个端点坐标都可以通过现有数据计算出来：

• 左上角：(d.x, d.y)
• 右上角：(d.x + d.width, d.y)
• 右下角：(d.x + d.width, d.y + d.height)
• 左下角：(d.x, d.y + d.height)

我们只需要基于这些计算出的坐标，用D3的<circle>元素绘制圆点即可。

具体实现代码 #

先保留你原有的Rectangle函数，然后新增一个绘制端点圆点的函数：

// 保留你原有的矩形绘制函数
Rectangle(data){ 
  this.canvas.selectAll('rect')
    .data(data)
    .enter()
    .append('rect')
    .attr('data-id', (d) => d.matchId)
    .attr('data-algorithm', (d) => d.algorithm)
    .attr('class', 'match match__rectangle')
    .attr('x', (d) => d.x)
    .attr('y', (d) => d.y)
    .attr('width', (d) => d.width)
    .attr('height', (d) => d.height)
    .style('fill', 'none')
    .style('stroke', (d) => d.color); 
}

// 新增：绘制矩形端点的圆点
function addRectangleCorners(data) {
  // 把每个矩形数据转换为四个端点的坐标数据
  const cornerPoints = data.flatMap(rectData => [
    { x: rectData.x, y: rectData.y, color: rectData.color },
    { x: rectData.x + rectData.width, y: rectData.y, color: rectData.color },
    { x: rectData.x + rectData.width, y: rectData.y + rectData.height, color: rectData.color },
    { x: rectData.x, y: rectData.y + rectData.height, color: rectData.color }
  ]);

  this.canvas.selectAll('.corner-dot')
    .data(cornerPoints)
    .enter()
    .append('circle')
    .attr('class', 'corner-dot')
    .attr('cx', d => d.x) // 圆点中心x坐标
    .attr('cy', d => d.y) // 圆点中心y坐标
    .attr('r', 3) // 圆点半径，可根据需求调整
    .style('fill', d => d.color); // 圆点颜色和矩形边框一致
}

使用方式 #

在你调用Rectangle(data)绘制完矩形后，紧接着调用addRectangleCorners(data)就能生成所有端点的圆点啦：

// 假设你的data是准备好的矩形数据
this.Rectangle(data);
this.addRectangleCorners(data);

为什么不推荐线条+圆拼接？ #

当然也可以用四条<line>加四个<circle>来模拟矩形，但这样会增加数据处理的复杂度——你需要为每条线和每个圆单独准备数据，还要确保它们和原矩形数据对应。相比之下，基于现有矩形的坐标直接计算端点的方式更简洁高效，也能保留你现有代码的逻辑。

如果后续需要处理数据更新（比如矩形位置/尺寸变化），只需要在圆点的D3逻辑中加入update和exit阶段的处理即可，和你处理矩形更新的逻辑类似。

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