改进 D3 序列 Sunburst 示例

Question

这个D3 示例是我的起点：

http://bl.ocks.org/kerryrodden/7090426

---

我想更改为图表提供数据的数据，我做了以下新示例：

http://jsfiddle.net/ZGVK3/

至少可以注意到两个问题：

1. 图例错误。这是因为它仍然包含原始示例中的“硬编码”名称。
2. 所有节点都涂成黑色。这是因为配色方案也仅针对原始示例中的节点名称进行了“硬编码”。

如何改进原始示例（或我的 jsfiddle，没关系），以便图例和颜色能够根据图表的数据进行自我调整？

Answer 1

您可以使用序数比例将颜色映射到不同的节点名称。实现它只需要对现有代码进行一些小的更改。

第 1 步。为颜色创建一个序数比例

不要让colors 只是一个颜色名称列表，硬编码为特定名称，而是使用d3.scale.ordinal()，并将.range() 设置为您要使用的颜色数组。例如：

var colors = d3.scale.ordinal()
  .range(["#5687d1","#7b615c","#de783b","#6ab975","#a173d1","#bbbbbb"]);

这将创建一个使用与原始可视化相同颜色的有序比例。由于您的数据需要更多颜色，因此您需要在范围内添加更多颜色，否则颜色会重复。

作为快捷方式，您可以使用d3.scale.category20() 让 d3 为您选择 20 种分类颜色。

现在在为path 元素弧和面包屑设置填充颜色时，您只需使用colors(d.name) 而不是colors[d.name]。

第 2 步。使用您的数据构建规模域

这个比例的.domain() 将在我们获得数据后设置，因为它取决于数据中包含的唯一名称列表。为此，我们可以遍历数据，并创建一个唯一名称数组。可能有几种方法可以做到这一点，但这里有一种效果很好：

var uniqueNames = (function(a) {
  var output = [];
  a.forEach(function(d) {
    if (output.indexOf(d.name) === -1) {
      output.push(d.name);
    }
  });
  return output;
})(nodes);

这会创建一个空数组，然后循环遍历nodes 数组的每个元素，如果新数组中不存在该节点的名称，则添加该节点。

然后你可以简单地将新数组设置为色标的域：

colors.domain(uniqueNames);

第 3 步。使用标尺的域构建图例

由于图例将依赖于域，因此请确保在设置域后调用 drawLegend() 函数。

您可以通过调用colors.domain().length 找到域中的元素数量（用于设置图例的高度）。那么对于图例的.data()，就可以使用域名本身了。最后，要设置图例框的填充颜色，您可以在d 上调用色标，因为域中的每个元素都是name。以下是传说中的这三个变化在实践中的样子：

var legend = d3.select("#legend").append("svg:svg")
  .attr("width", li.w)
  .attr("height", colors.domain().length * (li.h + li.s));

var g = legend.selectAll("g")
  .data(colors.domain())
  .enter().append("svg:g")
  .attr("transform", function(d, i) {
     return "translate(0," + i * (li.h + li.s) + ")";
  });

g.append("svg:rect")
  .attr("rx", li.r)
  .attr("ry", li.r)
  .attr("width", li.w)
  .attr("height", li.h)
  .style("fill", function(d) { return colors(d); });

就是这样。希望对您有所帮助。

这是更新后的JSFiddle。