javascript - 改进 D3 序列旭日示例

Question

这个 D3 示例作为我的起点:

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

---

我想更改为图表提供数据的数据，并制作了以下新示例:

http://jsfiddle.net/ZGVK3/

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

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

如何改进原始示例(或我的 jsfiddle，没关系)，以便图例和颜色根据提供图表的数据进行 self 调整？

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 .