如何使用D3.js为蜂巢图（Hive Plot）添加轴标签？

我之前做类似的蜂巢图时也遇到过这个问题，结合你现有的代码，你可以通过以下步骤给轴添加清晰的标签：

核心思路 #

你的代码已经通过angle比例尺定义了四个轴的角度，我们只需要基于这些角度，在每个轴的外侧添加文本标签，并调整文本的旋转角度使其与轴的方向匹配。

具体实现代码 #

在你现有绘制轴的代码之后，添加以下代码片段：

// 1. 定义轴标签文本（可以根据你的需求自定义）
var axisLabelTexts = {
  "source": "Source Nodes",
  "source-target": "Source → Target",
  "target-source": "Target → Source",
  "target": "Target Nodes"
};

// 2. 为每个轴添加标签
svg.selectAll(".axis-label")
  .data(angle.domain()) // 使用你已定义的轴domain作为数据
  .enter()
  .append("text")
  .attr("class", "axis-label")
  // 计算标签的位置：放在轴的外侧（outerRadius基础上再加20px）
  .attr("x", function(d) {
    return Math.cos(angle(d)) * (outerRadius + 20);
  })
  .attr("y", function(d) {
    return Math.sin(angle(d)) * (outerRadius + 20);
  })
  // 设置文本对齐方式
  .attr("text-anchor", "middle")
  // 旋转文本，使其与轴的方向一致
  .attr("transform", function(d) {
    var axisAngle = angle(d);
    var rotateDeg = axisAngle * 180 / Math.PI;
    var x = Math.cos(axisAngle) * (outerRadius + 20);
    var y = Math.sin(axisAngle) * (outerRadius + 20);
    return `rotate(${rotateDeg}, ${x}, ${y})`;
  })
  // 设置标签文本
  .text(function(d) {
    return axisLabelTexts[d];
  })
  // 自定义样式（可根据需求调整）
  .style("font-size", "12px")
  .style("font-weight", "500")
  .style("fill", "#2c3e50");

关键细节说明 #

• 位置计算：利用Math.cos和Math.sin结合轴的角度，计算出标签在SVG画布上的坐标，outerRadius + 20是让标签位于轴的外侧，你可以根据图的大小调整这个偏移值。
• 文本旋转：将弧度转换为角度后，以标签自身的坐标为旋转中心，确保文本沿着轴的方向排列，不会出现错位。
• 数据绑定：直接复用你已有的angle.domain()作为标签的数据，保证标签和轴一一对应，避免手动匹配出错。

如果你的轴标签需要更个性化的样式（比如不同颜色、更大字号），直接修改.style()里的属性即可。

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