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

Question

I am trying to implement this sankey example: http://bl.ocks.org/d3noob/c9b90689c1438f57d649

It uses a CSV file for data input with the fields:

source - target - value

The link title is displayed as:

I would like to add another field to the data input:

source - target - value - information

Which should be added to the link title as follows:

Do you see a way to add this information? I tried changing:

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

Which is unfortunately not working.

Answer 1

You didn't tell us exactly how it is not working. So, I'd guess the problem is the unary plus operator being used with strings... if my assumption is correct, you're probably seeing a NaN in the title.

Anyway, these are the steps:

First, add the field in the 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

Then, push the property in the links, without the unary plus:

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

Finally, get the property in the title:

link.append("title")
    .text(function(d) {
        return d.source.name + " → " +
            d.target.name + "\n" + format(d.value) + ", Information: " + d.information
    });

Here is the updated bl.ocks: http://bl.ocks.org/anonymous/5652b4a53cd73f0b3a493b400ec4e1b3/2cdf75a83dc79946722f975144c0ce892836a15a