使用 d3.js 的桑基图 - 添加信息到 link 标题

Question

我正在尝试实现这个 sankey 示例：http://bl.ocks.org/d3noob/c9b90689c1438f57d649

它使用 CSV 文件输入字段的数据：

source - target - value

link标题显示为：

我想在数据输入中添加另一个字段：

source - target - value - information

应将其添加到 link 标题中，如下所示：

您知道添加此信息的方法吗？我尝试更改：

<!-- 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**; });

不幸的是，这不起作用。

Answer 1

您没有确切地告诉我们如何它不起作用。所以，我猜问题出在与字符串一起使用的一元加运算符……如果我的假设是正确的，您可能会在标题中看到 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

使用 d3.js 的桑基图 - 添加信息到 link 标题

Sankey diagram using d3.js - Add information to link title

html

javascript

d3.js

sankey-diagram