D3 Sankey Chord颜色

Question

所以我正在使用D3的Sankey API开发一个Sankey图,我正在试图找出如何改变进出节点的波段或线的颜色.我可以在这里找到我正在尝试做的一个例子:

http://tamc.github.io/Sankey/

我希望能够单独选择每个乐队并选择单独乐队的颜色.我找不到D3的Sankey API的任何文档,所以我不知道如何实际解决这个问题.我尝试了通过在我提供的链接中搜索Sankey的代码找到的setColors函数.但是,这似乎不适用于我的代码.我使用此代码作为基础启动了我的Sankey:

http://tamc.github.io/Sankey/examples/simple.html

有人可以用这个作为参考,让我知道如何改变乐队的颜色吗？

PS如果有人也可以让我知道如何改变节点的颜色,这将是伟大的!

Answer 1

您链接到的示例在Sankey插件之上使用不同的API.我会解释这个例子.Sankey插件不会绘制视觉元素,只会计算它们的位置,因此您可以随意设置颜色.

示例中链接的相关代码如下:

var link = svg.append("g").selectAll(".link")
  .data(energy.links)
  .enter().append("path")
  .attr("class", "link")
  .attr("d", path)
  .style("stroke-width", function(d) { return Math.max(1, d.dy); })
  .sort(function(a, b) { return b.dy - a.dy; });

要更改颜色,只需设置不同的类或stroke明确设置:

.style("stroke", "red")

这当然也可以是一个功能,以便您可以为不同的路径设置不同的颜色.节点类似:

node.append("rect")
  .attr("height", function(d) { return d.dy; })
  .attr("width", sankey.nodeWidth())
  .style("fill", function(d) { return d.color = color(d.name.replace(/ .*/, "")); })
  .style("stroke", function(d) { return d3.rgb(d.color).darker(2); })

在示例中,填充颜色是根据名称设置的 - 您可以根据需要进行调整.