Question

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

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

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

以下是我绘制链接文本颜色的代码

// 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);

上面的工作非常精细，文本显示节点文本和节点颜色。当我尝试以相同的方式更改链接定义中的笔划值时，情况并非如此：

 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

帮助表示赞赏......

Bottomline：我正在寻找制作sankey图表的链接/和弦颜色与rect填充颜色相同...

Answer 1

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

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

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

d3.js sankey链接颜色

1 个答案: