javascript - D3 桑基和弦颜色

Question

因此，我正在使用 D3 的 Sankey API 开发一个 Sankey 图，并且我正在尝试弄清楚如何更改进出节点的 strip 或绳索的颜色。可以在此处找到我正在尝试做的示例:

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

我希望能够单独选择每个波段并选择该波段的颜色。我找不到 D3 的 Sankey API 的任何文档，所以我不知道如何实际实现它。我尝试了通过搜索我提供的链接中的 Sankey 代码找到的 setColors 函数。但是，这似乎不适用于我的代码。我以这段代码为基础开始了我的 Sankey:

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

有人可以告诉我如何使用这个作为引用来改变乐队的颜色吗？

附言如果有人也可以告诉我如何更改节点的颜色，那就太好了!

Answer 1

您链接到的示例在 Sankey 插件之上使用了不同的 API。我会解释 this example . 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); })

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