javascript - 根据数据中的附加列更改 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:随着数据结构的改变，我做了一些小改动