如何在d3.jS中为Sankey图的链接添加第二个值:

How to add a second value to the links of a Sankey diagram in d3.jS :

本文关键字：链接 添加 第二个 Sankey d3 jS 中为      更新时间：2023-09-26

D3.JS中的Sankey图采用节点和链接的数据集来绘制(参见http://jsfiddle.net/mF27g/by VividD的一个示例)。数据集看起来像:

{
    "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"集合，这里我有两个"value"而不是一个"value"，例如:

   "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。

任何想法?

我不确定你想要什么是可能的，但首先你可以使用不同的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);
  });

相关文章：