Javascript 改进的D3序列Sunburst实例

这个

D3

示例是我的出发点：

---

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

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

传说是错误的。这是因为它仍然包含来自原始示例的“硬编码”名称

所有节点均为黑色。这是因为颜色方案也仅针对原始示例中的节点名称进行“硬编码”

---

如何改进原始示例（或者我的JSFIDLE，这无关紧要），以便图例和颜色可以根据提供给图表的数据进行自我调整？

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

第一步。为颜色创建顺序比例 使用并将

.range（）

设置为要使用的颜色数组，而不是将

颜色

简单地作为颜色名称列表，硬编码为特定名称。例如：

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

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

作为快捷方式，您可以使用让d3为您选择20种分类颜色

现在，当为

路径

元素弧以及面包屑设置填充颜色时，您只需使用

颜色（d.name）

而不是

颜色[d.name]

第二步。使用您的数据构建天平的范围 一旦我们有了数据，就会设置此比例的

.domain（）

，因为它将取决于数据中包含的唯一名称列表。为此，我们可以循环遍历数据，并创建一个唯一名称数组。可能有几种方法可以做到这一点，但这里有一种效果很好：

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

这将创建一个空数组，然后循环遍历

节点

数组的每个元素，如果新数组中不存在该节点的名称，则添加该节点

然后，您可以简单地将新阵列设置为色阶的域：

colors.domain(uniqueNames);

第三步。使用标尺的域来构建图例 由于图例将取决于域，请确保在设置域后调用

drawLegend（）

函数

通过调用

colors.domain（）.length

，可以找到域中的元素数（用于设置图例的高度）。然后，对于图例的

.data（）

，可以使用域本身。最后，要设置图例框的填充颜色，请调用

d

上的颜色刻度，因为域中的每个元素都是

名称

。下面是传说中的三个变化在实践中的表现：

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); });

就这样。希望有帮助

---

以下是最新信息。

关于处理颜色，我至少在某种程度上处理过。它基于可以由任何名称组成的页面类型数组。但它仅限于相对较少的页面类型。无论如何，请看一看。很棒的导游！谢谢！