Sankey - Derive node heights from Data

[IPWright]

I'm trying to make a slight change to the Sankey visualization but I'm having a little trouble achieving what I want. What I want to do is fix the width of the links (this is relatively straight forward) but then calculate the height of a node based on a value in the data, rather than totals of all the links. What I currently have is as follows:

Then if I change the height of the node to:

.attr("height", function(d) { return d.value; });

I get the following: 

Now my Nodes are the correct height, but my lines are in the wrong place. I can't figure out quite how to move them to the correct place. In my case I'm adding the Nodes after the paths, and therefore it's impossible to access the height function. If however I swap them around it seems that the 'node' which lives on one end of a link, doesn't really correspond to the same object that has a height function attached.

Can anyone suggest how I might be able to achieve this?

Thanks

[Phoebe Bright]

There is a transform as part of drawing the node,            .attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; })

I think you need to amend the d.y value by adding half the original height, minus the current height (something like that anyway!)

Phoebe.

--
You received this message because you are subscribed to the Google Groups "d3-js" group.
To unsubscribe from this group and stop receiving emails from it, send an email to d3-js+un...@googlegroups.com.
For more options, visit https://groups.google.com/groups/opt_out.
 
 

[IPWright]

I'm not sure that would work. For example the bottom left node (21) has two lines coming from it, but the node isn't tall enough to accommodate both of their source locations even if I move it.

[colin....@gmail.com]

If I understand you correctly, you need to do two things

1. add a field to the node like {"name":"node1","value":40}

2. Comment out one line in the sankey.js plugin that invokes the sum of the link value function

//computeNodeValues();  //we skip this.

I got this to work, but I am trying to a few other things to extend this diagram to display a none conservative flow, meaning the amounts flow out/in are not the same.  I have a lot of trouble to make it work.  But at least I can give it a node value as above.  I think I need to combine the calculation of Chord diagram with it.  So far, I can't figure out where is the code that draw the link path in either Sankey or Chord diagram.

[colin....@gmail.com]

You can see that I haven't done svg before.  So looks like the trick will be to modify this function in the sankey.js  The link is drawn as a thick curve (thinkness=link.dy) between the source and target nodes.  I need to change it to a three leg path, one curve, one straight line and another curve and then close the path to achieve my goal.

function link(d) {

      var x0 = d.source.x + d.source.dx,

          x1 = d.target.x,

          xi = d3.interpolateNumber(x0, x1),

          x2 = xi(curvature),

          x3 = xi(1 - curvature),

          y0 = d.source.y + d.sy + d.dy / 2,

          y1 = d.target.y + d.ty + d.dyTarget / 2;

      return "M" + x0 + "," + y0

           + "C" + x2 + "," + y0

           + " " + x3 + "," + y1

           + " " + x1 + "," + y1;

    }

[colin....@gmail.com]

I just created a variation of the D3.js Sankey diagram to visualize the many-to-many relationships between the stacks of the entities, that I want to use for enterprise architecture application.  It does what you wanted and much more.

Here is the gist:

https://gist.github.com/colinyzhao/5649114

and the demo

http://bl.ocks.org/colinyzhao/5649114

The height of the node is based on node value. The link has two values, sourceCount (value) and targetCount. The node has three more fields to further constraint the width of the link/path calculation. Links can overlap at the source and target node.