StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>You can accomplish that effect by modifying the x values at</p> <pre><code>nodes.forEach(function(d) { d.x = /*yourValues*/; d.y = d.depth * 180; }); </code></pre> <p>As you were probably aware of that much, the real key for your particular problem will be to provide each node with a value that relates to the number of nodes at its level (i.e. siblings). As the example you provided already gives a <code>depth</code> value to each node, you could always iterate through the nodes and tally those values, eventually yielding an array like:</p> <pre><code>node0 has 0 nodes before it in the same depth (depth 0) node1 has 0 nodes before it in the same depth (depth 1) node2 has 1 nodes before it in the same depth (depth 1) </code></pre> <p><strong>UPDATE</strong> You can find the sibling values and achieve the desired effect by replacing the above <code>forEach</code> code with the following:</p> <pre><code>nodes.forEach(function(d) { //iterate through the nodes if(d.parent != null){ //if the node has a parent for(var i = 0; i < d.parent.children.length; i++){ //check parent children if(d.parent.children[i].name == d.name){ //find current node d.downset = i; //index is how far node must be moved down } } d.parentDownset = d.parent.downset; //must also account for parent downset } if(d.downset == null){ d.downset = 0; } if(d.parentDownset == null){ d.parentDownset = 0; } d.x = (d.downset * 40) + (d.parentDownset * 40) + 20; d.y = d.depth * 180; }); </code></pre> <p>Additionally, with the way that the children are named in your example, you could just parse out the number after the <code>.</code></p> <p>Take the <code>1</code> out of <code>Child 1.1</code>, otherwise return <code>0</code> for <code>Child 1</code> and <code>Child 2</code></p> <pre><code>nodes.forEach(function(d,i) { d.x = d.numberAfterPeriod * 40 + 20; d.y = d.depth * 180; }); </code></pre>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload