Javascript 使用d3.js的Sankey图-将信息添加到链接标题
我正在尝试实现这个sankey示例: 它使用CSV文件进行数据输入,并包含以下字段: 源-目标-值 链接标题显示为: 我想在数据输入中添加另一个字段: 来源-目标-价值-信息 应将其添加到链接标题中,如下所示: 您是否看到添加此信息的方法?我试着改变:Javascript 使用d3.js的Sankey图-将信息添加到链接标题,javascript,html,d3.js,sankey-diagram,Javascript,Html,D3.js,Sankey Diagram,我正在尝试实现这个sankey示例: 它使用CSV文件进行数据输入,并包含以下字段: 源-目标-值 链接标题显示为: 我想在数据输入中添加另一个字段: 来源-目标-价值-信息 应将其添加到链接标题中,如下所示: 您是否看到添加此信息的方法?我试着改变: <!-- language: lang-js --> // load the data (using the timelyportfolio csv method) d3.csv("sankey.csv", function(er
<!-- 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**; });
//加载数据(使用timelyportfolio csv方法)
d3.csv(“sankey.csv”,函数(错误、数据){
//以与原始示例相同的样式设置图形,但为空
图形={“节点”:[],“链接”:[]};
data.forEach(函数(d){
push({“name”:d.source});
push({“name”:d.target});
graph.links.push({“source”:d.source,
“目标”:d.目标,
“价值”:+d.价值,
**“信息”:+d.信息**});
});
//添加链接标题
链接。附加(“标题”)
.文本(功能(d){
返回d.source.name+”→ " +
d、 target.name+“\n”+格式(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:你能分享一下你的工作吗?