如何为NVD3旭日图添加图例？现有代码配置后未生效

嘿，我之前也踩过这个坑！NVD3的旭日图（sunburstChart）其实并没有内置的图例支持，所以你调用.showLegend(true)完全不会有效果——这个方法对这个图表类型来说根本不生效。不过别担心，我们可以手动用D3来构建一个自定义图例，步骤如下：

1. 统一颜色尺度 #

首先把你用到的颜色尺度单独存下来，方便后续图例复用：

var colorScale = d3.scale.category20c();

chart = nv.models.sunburstChart()
  .showTooltipPercent(true)
  .color(colorScale) // 绑定这个颜色尺度
  .showLabels(false)
  .margin({bottom: 20, top: 10, right: 0})
  .mode("value");

2. 提取图表中的唯一节点类别 #

旭日图是层级结构，我们需要递归遍历数据，提取所有不重复的节点名称（你也可以根据需求只提取某一层级的节点）：

// 递归遍历数据，收集唯一节点名称
function getUniqueNodes(data, uniqueSet = new Set()) {
  uniqueSet.add(data.name);
  if (data.children && data.children.length > 0) {
    data.children.forEach(child => getUniqueNodes(child, uniqueSet));
  }
  return Array.from(uniqueSet);
}

// 假设你的旭日图数据存在data变量中
var legendItems = getUniqueNodes(data);

3. 添加图例容器 #

在页面上给图例准备一个容器，比如放在图表SVG的旁边：

<!-- 假设你的旭日图SVG容器是#sunburst-chart -->
<div id="sunburst-chart"></div>
<div id="sunburst-legend"></div>

4. 用D3渲染自定义图例 #

现在用D3把图例渲染到容器里：

// 选择图例容器，绑定数据
var legend = d3.select("#sunburst-legend")
  .selectAll(".legend-item")
  .data(legendItems)
  .enter()
  .append("div")
  .attr("class", "legend-item")
  .style("display", "flex")
  .style("align-items", "center")
  .style("margin", "6px 0");

// 添加颜色方块
legend.append("div")
  .style("width", "18px")
  .style("height", "18px")
  .style("background-color", d => colorScale(d))
  .style("margin-right", "10px")
  .style("border-radius", "2px");

// 添加节点名称文本
legend.append("span")
  .text(d => d)
  .style("font-size", "14px");

5. 给图例加样式美化 #

最后用CSS调整图例的位置和样式，让它和图表更协调：

#sunburst-legend {
  position: absolute;
  top: 30px;
  right: 30px;
  padding: 12px;
  background-color: #fff;
  border-radius: 6px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

如果你的旭日图只需要显示顶层节点的图例，只需要修改getUniqueNodes函数，只返回顶层的data.children即可，不用递归遍历所有子节点。

内容的提问来源于stack exchange，提问作者mauro.Joestar