d3.js sankey link 颜色

Question

我正在寻找使 link 颜色与 d3 sankey 图表中的节点填充颜色相同的颜色。

我正在使用以下函数获取节点颜色

function getNodeColor(d){
          console.log(d3.rgb(d.color).darker(2));
          return d3.rgb(d.color).darker(2);
}

以下是我绘制 links

文本颜色的代码

// add in the title for the nodes
    node.append("text")
        .attr("x", -6)
        .attr("y", function(d) { return d.dy / 2; })
        .attr("dy", ".35em")
        .attr("text-anchor", "end")
        .attr("transform", null)
        .text(function(d) { return d.name; })
        .filter(function(d) { return d.x < width / 2; })
        .attr("x", 6 + sankey.nodeWidth())
        .attr("text-anchor", "start")
        .style("stroke", getNodeColor);

上面的效果非常好，文本显示了带有节点颜色的节点文本。当我尝试以相同的方式更改 link 定义中的笔画值时，情况并非如此：

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

我是 d3 sankey 的新手，关注 http://bl.ocks.org/d3noob/c9b90689c1438f57d649

感谢帮助...

底线：我正在寻找使桑基图的 link/chord 颜色与矩形填充颜色相同的颜色...

Answer 1

您可以使用以下代码为图表中的链接使用源节点颜色。如果您更喜欢使用目标节点颜色，也可以使用 target.color。

svg.selectAll(".link")
  .style('stroke', function(d){
    return d.source.color;
  })

此代码需要放在设置节点颜色的代码之后。

d3.js sankey link 颜色

d3.js sankey link color

d3.js

sankey-diagram