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

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.

Can you share a fiddle of your work? – Fawzan Oct 24 '17 at 07:13 — Fawzan, Oct 24 '17 at 07:13

Gerardo Furtado · Accepted Answer · 2017-10-24T07:24:11.787

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

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

1 Answers1