d3.js sankey diagram - using multi dime array as nodes

Question

I've been developing an application using Google Chart's Sankey Diagram and I successfully created a Sankey Diagram sample on a web app. But I'm not satisfied with the layout, and I search the internet and came upon d3.js's plugin for Sankey Diagram. It looks really nice and I tested the sample code application from here.

In the code, it calls the external JSON file to use it as nodes:

d3.json("sankey-formatted.json", function(error, graph) { ... });

In the first application I developed, I get my nodes from a multidimensional array like this:

//rows is the multidimensional array
//i got this from the example on Google Charts
data.addRows(rows);

The multidimensional array is a collection of objects that came from an AJAX call.

How can I use this array for the Sankey Diagram? Can I do it without calling an external file?

So you already have the data and you just want to pass it to the plugin without doing `d3.json()`? — Oleg, Aug 29 '14 at 08:23

score 1 · Answer 1 · edited Dec 19 '14 at 10:10

I managed to answer my own question (silly me). I'll be posting this for future use.

If you already have a variable that holds the data (i.e an array), use it directly.

In my case, the original code:

d3.json("sankey-formatted.json", function(error, graph) {

  //sankey is an object, as well as the graph
  sankey
      .nodes(graph.nodes)
      .links(graph.links)
      .layout(32);

 // ... other codes
});

Change it as

// this time, nodes and links are the variables
// that holds the arrays to be used by the chart
// remove the encapsulation of d3.json
sankey
    .nodes(nodes)
    .links(links)
    .layout(32);

// ... other codes

Hope this will help for future views.

d3.js sankey diagram - using multi dime array as nodes

1 Answers1