Javascript 使用d3.js的Sankey图-将信息添加到链接标题

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

我正在尝试实现这个sankey示例:

它使用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**; });

//加载数据(使用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:

你能分享一下你的工作吗?