javascript - d3.js - 可折叠力布局 - 为叶节点设置可变颜色

Question

我一直在使用这个 d3.js 模板 - 可折叠力布局图:http://bl.ocks.org/mbostock/1093130

有什么办法可以让不同分支的叶节点有不同的颜色吗？

我的猜测是可以通过修改“function color(d) {}”并为不同组号的 child 分配不同的颜色来实现。然后将组编号添加到 json 中的子项中。文件。 ？我也可能是错的。

function color(d) {
  return d._children ? "#3182bd" // collapsed package
     : d.children ? "#c6dbef" // expanded package
     : "#fd8d3c"; // leaf node
}

我对 JavaScript 的了解并不能让我自己弄清楚代码。

来自优秀编程灵魂的任何形式的帮助将不胜感激。

为了说明，这就是我正在寻找的:

Different leaf node color

Answer 1

确实，颜色函数必须更改。

这个SO Question演示如何根据记录的属性之一为其分配唯一的颜色。另请阅读:d3.js ordinal scales reference .

我的理解是，您希望所有节点都根据其父节点进行着色。以下是具体操作方法。

调整数据源

对于每个节点，您想知道它有哪个父节点。这将允许您根据每个节点的父节点为每个节点指定颜色。

例如，数据可能如下所示(摘录):

{
 "name": "optimization",
 "parentName": "analytics", 
 "children": [
  {"name": "AspectRatioBanker", "parentName": "optimization", "size": 7074}
 ]
}

对于每个节点，parentName 告诉您记录的组。

您链接的要点中缺少此信息，您可以通过遍历树并动态附加 parentName 信息来处理它。

色阶

获取可分配给组的颜色的一种简单方法是使用 d3.js 内置的分类色标，例如 category10 .

var nodeColor = d3.scale.category10();

为每条记录分配颜色

应修改 color 函数，以便根据节点的 parentName 属性分配颜色:

function color(d) {
  return nodeColor(d.parentName)
}

您会注意到，我已经修改了该函数，不仅可以动态为叶子分配颜色，还可以为所有级别的节点动态分配颜色。这不是强制性的，但我这样做是为了避免 category10 颜色与要点的硬编码颜色之间发生冲突，这可能看起来很困惑。

这是一个working demo (原始要点的分支)。

替代方案/变体

您可以调整上面的代码，使用序数比例而不是 category10 来为每个特定组分配您选择的颜色。

var nodeColor = d3.scale.ordinal()
  .domain(['none', 'flare', 'analytics', 'graph', 'cluster', 'optimization'])
  .range(['black', '#ffaa00', 'grey', 'red', 'green', 'blue'])

如图here .