2

The Sankey diagram in D3.JS takes a dataset of nodes and links to plot (see an fiddle example at http://jsfiddle.net/mF27g/ by VividD). The dataset would look like :

{
    "nodes": [{"node": 0, "name": "node0"}, 
              {"node": 1, "name": "node1"}, 
              {"node": 2, "name": "node2"}, 
              {"node": 3, "name": "node3"}, 
              {"node": 4, "name": "node4"}, 
              {"node": 5, "name": "node5"}]..., 
    "links": [{"source": 0, "target": 2, "value": 25}, 
              {"source": 1, "target": 2, "value": 5}, 
              {"source": 1, "target": 3, "value": 20},  
              {"source": 2, "target": 4, "value": 29},  
              {"source": 2, "target": 5, "value": 1}, 
              {"source": 3, "target": 4, "value": 10},
              {"source": 3, "target": 5, "value": 2}...]
}

In my case I have a slightly different dataset to represent. The difference is in the "links" set, where instead of one "value", I have two such as:

   "links": [{"source": 0, "target": 2, "value1": 15, "value2": 10}, 
              {"source": 1, "target": 2, "value1": 2, "value2": 3}, 
              {"source": 1, "target": 3, "value1": 10, "value2": 10},  
              {"source": 2, "target": 4, "value1": 20, "value2": 9},...

My question is: how can I split each link into two parts? Ideally I would like to color each part with a different color. Two colors in total one for value1 and one for value2.

Any ideas?

mfroese
  • 309
  • 1
  • 5
  • 18
  • Could you simply add two new links, each with its respective value, for each original link? – Lars Kotthoff Jun 04 '14 at 21:36
  • @LarsKotthoff: How could I then color each link differently? I did what you suggested and the two links look like one thick link because they are of the same color. – mfroese Jun 04 '14 at 21:56

1 Answers1

0

I'm not sure what you are asking for is possible, but for a start you can add a second value into the tooltip using a different JSON field.

Here: 

{
    "source": 2,
    "target": 5,
    "value": 1,
    "value2": 10
}

etc.

link.append("title")
.text(function(d) {
return d.source.name + " → " + d.target.name + "\n" +
format(d.value) + "\n value 2: " +
format(d.value2);
  });
Taryn
  • 242,637
  • 56
  • 362
  • 405
csaladenes
  • 1,100
  • 1
  • 11
  • 27