Question

我正在修改原始的D3 Sequence Sunburst file以更好地满足我的需求。原始colors变量是硬编码对象。这显然不是最好的方法。我正在使用flare.json示例，它更大，更难阅读，并且仍然比测试后我将成为用户的json文件小得多。

我想随机生成颜色，将它们应用到createvisualization函数中的每个数据，但我是D3的新手，并且不知道如何1）获取名称（除了叶子之外的所有内容）从json文件中，2）将它们与随机颜色配对。

编辑：

添加随机颜色并应用它们变得微不足道，

var colors = d3.scale.category10();
...
.style("fill", function(d,i) { return colors(i); })

但我仍然要注意如何获取json中所有非叶子的名称，然后从随机颜色和非叶子中创建一个数组。

非常感谢大家的帮助。

Answer 1

要获取所有非叶元素的名称，您可以执行以下操作。

var names = [];

function getNames(node) {
  if(node.children) {
    names.push(node.name);
    node.children.forEach(function(c) { getNames(c); });
  }
}

getNames(root);

运行此代码后，names将包含您想要的所有名称。要从中生成图例，您可以使用names数组作为数据：

var gs = svg.selectAll("g.name").data(names).enter().append("g").attr("class", "name");
gs.append("rect")
  // set position, size etc
  .attr("fill", d);
gs.append("text")
  // set position etc
  .text(String);

这将为每个名称附加g元素，并在每个g元素中添加rect，其中填充了与名称对应的颜色和text显示名称的元素。

如何为D3 Sequence Sunburst创建图例？

编辑：

1 个答案: