[英]D3.js Sankey diagram: Add title (text) above each column of nodes
[英]Sankey diagram using d3.js - Add information to link title
我正在嘗試實現這個sankey示例: http ://bl.ocks.org/d3noob/c9b90689c1438f57d649
它使用CSV文件輸入數據:
來源 - 目標 - 價值
我想在數據輸入中添加另一個字段:
來源 - 目標 - 價值 - 信息
您是否看到了添加此信息的方法? 我試過改變:
<!-- language: lang-js -->
// load the data (using the timelyportfolio csv method)
d3.csv("sankey.csv", function(error, data) {
//set up graph in same style as original example but empty
graph = {"nodes" : [], "links" : []};
data.forEach(function (d) {
graph.nodes.push({ "name": d.source });
graph.nodes.push({ "name": d.target });
graph.links.push({ "source": d.source,
"target": d.target,
"value": +d.value,
**"information": +d.information**} });
});
// add the link titles
link.append("title")
.text(function(d) {
return d.source.name + " → " +
d.target.name + "\n" + format(d.value) + **d.information**; });
遺憾的是,這不起作用。
你沒告訴我們它究竟是如何起作用的。 所以,我猜這個問題是使用字符串的一元加運算符......如果我的假設是正確的,你可能會在標題中看到一個NaN
。
無論如何,這些是步驟:
首先,在CSV中添加字段:
source,target,value,info
Barry,Elvis,2,foo
Frodo,Elvis,2,bar
Frodo,Sarah,2,baz
Barry,Alice,2,foobar
Elvis,Sarah,2,foobaz
Elvis,Alice,2,barbar
Sarah,Alice,4,barbaz
然后,在沒有一元加號的情況下推送鏈接中的屬性:
data.forEach(function(d) {
graph.nodes.push({
"name": d.source
});
graph.nodes.push({
"name": d.target
});
graph.links.push({
"source": d.source,
"target": d.target,
"value": +d.value,
"information": d.info
});
});
最后,獲取標題中的屬性:
link.append("title")
.text(function(d) {
return d.source.name + " → " +
d.target.name + "\n" + format(d.value) + ", Information: " + d.information
});
這是更新的bl.ocks: http ://bl.ocks.org/anonymous/5652b4a53cd73f0b3a493b400ec4e1b3/2cdf75a83dc79946722f975144c0ce892836a15a
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.