如何在d3.jS的Sankey圖的鏈接中添加第二個值：

Question

D3.JS中的Sankey圖采用節點和鏈接圖的數據集（請參見VividD在http://jsfiddle.net/mF27g/上的小提琴示例）。 數據集看起來像：

{
    "nodes": [{"node": 0, "name": "node0"}, 
              {"node": 1, "name": "node1"}, 
              {"node": 2, "name": "node2"}, 
              {"node": 3, "name": "node3"}, 
              {"node": 4, "name": "node4"}, 
              {"node": 5, "name": "node5"}]..., 
    "links": [{"source": 0, "target": 2, "value": 25}, 
              {"source": 1, "target": 2, "value": 5}, 
              {"source": 1, "target": 3, "value": 20},  
              {"source": 2, "target": 4, "value": 29},  
              {"source": 2, "target": 5, "value": 1}, 
              {"source": 3, "target": 4, "value": 10},
              {"source": 3, "target": 5, "value": 2}...]
}

就我而言，我要表示的數據集略有不同。 區別在於“鏈接”集，其中有兩個，而不是一個“值”：

   "links": [{"source": 0, "target": 2, "value1": 15, "value2": 10}, 
              {"source": 1, "target": 2, "value1": 2, "value2": 3}, 
              {"source": 1, "target": 3, "value1": 10, "value2": 10},  
              {"source": 2, "target": 4, "value1": 20, "value2": 9},...

我的問題是：如何將每個鏈接分為兩部分？ 理想情況下，我想為每個零件上不同的顏色。 總共有兩種顏色，一種是value1，另一種是value2。

有任何想法嗎？

Answer 1

我不確定您要的內容是否可能，但是首先，您可以使用其他JSON字段將第二個值添加到工具提示中。

這里：

{
    "source": 2,
    "target": 5,
    "value": 1,
    "value2": 10
}

等等

link.append("title")
.text(function(d) {
return d.source.name + " → " + d.target.name + "\n" +
format(d.value) + "\n value 2: " +
format(d.value2);
  });