沿着D3 Sankey圖中的鏈接的漸變

Question

這是Sankey diagram jsfiddle：

我試圖修改鏈接的顏色，以便每個鏈接的顏色實際上是從源節點顏色到其目標節點顏色的漸變。 （假設不透明度將保持為0.2或0.5，這取決於鼠標是否在鏈接上徘徊;因此鏈接將保持比節點稍微“淡化”）

我看了一下這個漂亮而有啟發性的例子 ，它繪制了這個漸變填充循環：

但是，我根本無法將該解決方案集成到我的解決方案中，對於給定的任務來說，它看起來太復雜

另外，請注意原始Sankey圖中的鏈接在拖動節點時移動，並且即使在那些暫時狀態下也必須顯示漸變。 一個小問題是鏈接和節點的透明度以及繪制順序。 我會很感激想法和提示。

Answer 1

@VividD：剛剛看到你的評論，但無論如何我還是完成了。 在你自己想出來之前，請隨意忽略這一點，但我想確保我知道如何去做。 另外，這是一個非常常見的問題，非常適合參考。

如何沿着直線定位漸變

需要提醒的人閱讀這之后，它只會工作，因為路徑幾乎是直線，所以線性漸變的外觀半體面-路徑行程設置漸變不與路徑漸變曲線！

1. 在初始化中，在SVG中創建<defs> （definitions）元素並將選擇保存到變量：

    var defs = svg.append("defs"); 

2. 定義一個函數，該函數將從鏈接數據對象為漸變創建唯一的 id。 為函數確定節點顏色的名稱也是一個好主意：

    function getGradID(d){return "linkGrad-" + d.source.name + d.target.name;} function nodeColor(d) { return d.color = color(d.name.replace(/ .*/, ""));} 

3. 在<defs>創建<linearGradient>對象的選擇並將其連接到鏈接數據，然后根據源和目標數據對象設置停止偏移和線坐標。

   對於您的示例，如果您只是使所有漸變水平，它可能看起來很好。 因為這是方便的默認我認為我們所要做的就是告訴漸變以適應它繪制的路徑的大小：

    var grads = defs.selectAll("linearGradient") .data(graph.links, getLinkID); grads.enter().append("linearGradient") .attr("id", getGradID) .attr("gradientUnits", "objectBoundingBox"); //stretch to fit grads.html("") //erase any existing <stop> elements on update .append("stop") .attr("offset", "0%") .attr("stop-color", function(d){ return nodeColor( (d.source.x <= d.target.x)? d.source: d.target) }); grads.append("stop") .attr("offset", "100%") .attr("stop-color", function(d){ return nodeColor( (d.source.x > d.target.x)? d.source: d.target) }); 

   不幸的是，當路徑是完全直線時，其邊界框不存在（無論筆划寬度有多寬）， 最終結果是漸變不會被繪制 。

   所以我不得不切換到更一般的模式，其中漸變位置和沿源和目標之間的線成角度：

    grads.enter().append("linearGradient") .attr("id", getGradID) .attr("gradientUnits", "userSpaceOnUse"); grads.attr("x1", function(d){return d.source.x;}) .attr("y1", function(d){return d.source.y;}) .attr("x2", function(d){return d.target.x;}) .attr("y2", function(d){return d.target.y;}); /* and the stops set as before */ 

4. 當然，現在漸變是基於坐標系而不是基於路徑的長度定義的，你必須在節點移動時更新那些坐標，所以我必須將這些定位語句包裝在我可以調用的函數中在dragmove()函數中。

5. 最后，在創建鏈接路徑時，將其填充設置為CSS url()函數，引用從數據派生的相應唯一漸變id（使用預定義的實用程序函數）：

    link.style("stroke", function(d){ return "url(#" + getGradID(d) + ")"; }) 

還有瞧！