Question

如何在节点之间的同一链路上放置两种颜色。

在这里，我需要在链接上添加不同的颜色，这是我之前提到的价值。

此颜色可以放在链接的两侧。

所以半连接一种颜色，另一半连接另一种颜色。

所以请帮我做。

Answer 1

您可以使用SVG gradient执行此操作。这是使用D3的example。这个想法是在中间有一个硬停止，所以它看起来像两个单独的颜色而不是渐变。代码看起来像这样。

var gradient = svg.append("svg:defs")
  .append("svg:linearGradient")
    .attr("id", "gradient")
    .attr("x1", "0%")
    .attr("y1", "0%")
    .attr("x2", "100%")
    .attr("y2", "0%");

gradient.append("svg:stop")
    .attr("offset", "0%")
    .attr("stop-color", "green")
    .attr("stop-opacity", 1);

gradient.append("svg:stop")
    .attr("offset", "50%")
    .attr("stop-color", "green")
    .attr("stop-opacity", 1);

gradient.append("svg:stop")
    .attr("offset", "50%")
    .attr("stop-color", "red")
    .attr("stop-opacity", 1);

gradient.append("svg:stop")
    .attr("offset", "100%")
    .attr("stop-color", "red")
    .attr("stop-opacity", 1);

您可以像在示例中一样使用它。

d3.js中节点之间相同链路上的两种颜色

1 个答案: