1

所以我正在开发一个 Sankey 图，使用 D3 的 Sankey API，我试图弄清楚如何改变往返节点的条带或绳索的颜色。我正在尝试做的一个例子可以在这里找到：

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

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

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

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

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

4

1 回答 1

5

您链接到的示例在 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); })

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

于 2014-03-16T17:11:14.723 回答