d3.js中節點之間的同一鏈接上的兩種顏色

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

您可以像使用示例一樣使用它。