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

Question

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

有不同分支的叶节点有不同的颜色吗？

我的猜测是，它可以通过修改＆＃34;功能颜色（d）{}＆＃34;来实现。并为具有不同组号的儿童分配不同的颜色。然后在json中为子项添加组号。文件。 ？我可能也错了。

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

我对JavaScripts的了解不允许我自己弄清楚代码。

非常感谢来自优秀编程灵魂的任何帮助。

为了说明这是我正在寻找的：

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（原始要点的分支）。

Alernatives / variants

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

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

这说明here。