根据数据中的附加列更改 d3 Sankey 图中的节点颜色

Question

我正在使用 D3 Sankey 插件创建 Sankey 图。我有标准列：源、目标、值以及一个名为 nodeColor 的附加列。我希望目标节点的颜色由 "nodeColorTarget" 列中记录的颜色决定。我能够将节点的源代码更改为所有一种颜色。但是，我无法开发一个函数来使用附加列来指定颜色。

示例数据：

source,target,value,nodeColorTarget
Dist A,Place1,1,red
DistB,Place1,5,red
DistB,Place2,2,grey
DistB,Place2,1,grey
DistB,Place3,2,blue

现有代码：

// add the rectangles for the nodes
  node.append("rect")
      .attr("height", function(d) { return d.dy; })
      .attr("width", sankey.nodeWidth())
      .style("fill", "red") 
      //.style("fill", function(d) { 
          //return d.color = color(d.name.replace(/ .*/, "")); })
      //.style("stroke", function(d) { 
         // return d3.rgb(d.color).darker(2); })
    //.append("title")
     // .text(function(d) { 
         // return d.name + "\n" + format(d.value); });

我的完整代码是here。

Answer 1

您首先需要添加这样的属性：

graph.nodes.push({ "name": d.source, "color": d.nodeColorTarget });

然后你可以这样称呼它：

.style("fill", function(d) { return d.color;})

看这个例子：http://plnkr.co/edit/4xPx05PxnWxoQBhIj2lo?p=preview

PS : 随着数据结构的改变，我做了一些小改动

根据数据中的附加列更改 d3 Sankey 图中的节点颜色

Change node colors in d3 Sankey Diagram based on additional column in data

javascript

colors

d3.js

sankey-diagram