The Sankey diagram in D3.JS takes a dataset of nodes and links to plot (see an fiddle example at http://jsfiddle.net/mF27g/ by VividD). The dataset would look like :
{
"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}...]
}
In my case I have a slightly different dataset to represent. The difference is in the "links" set, where instead of one "value", I have two such as:
"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},...
My question is: how can I split each link into two parts? Ideally I would like to color each part with a different color. Two colors in total one for value1 and one for value2.
Any ideas?
I'm not sure what you are asking for is possible, but for a start you can add a second value into the tooltip using a different JSON field.
Here:
{
"source": 2,
"target": 5,
"value": 1,
"value2": 10
}
etc.
link.append("title")
.text(function(d) {
return d.source.name + " → " + d.target.name + "\n" +
format(d.value) + "\n value 2: " +
format(d.value2);
});
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.