D3 Force Layout - No overlapping links - javascript

I have a D3 visualization with nodes using the force-layouts as seen below. Some of the lines cross each other, which makes the visualization more difficult to understand. How can I ensure that the lines do not overlap?
I've tried modifying the parameters of the force-layout (charge, friction, gravity), but without any luck. The current code is below. Perhaps I need to do something other than modifying the force-layout to achieve the result?
force = d3.layout.force()
.nodes(data_nodes)
.links(data_links)
.charge(-3000)0
.friction(0.6)
.gravity(0.6)
.size([width,height])
.start();

As Lars Kotthoff stated it can be done manually (I found http://bl.ocks.org/mbostock/3231298#index.html as inspiration), but actually it could be done a lot simpler if I just changed the force-layout a bit.
If I let the central node have a quite strong charge compared to the remaining nodes, they will align nicely in a circle around the node, removing any overlaps:
.charge(function(d, i) { return i==0 ? -10000 : -500; })

You can put extra nodes on the edges to reduce overlap.
E.g: http://bl.ocks.org/couchand/7190660

Related

d3.js Sankey Chart: Manually Position SINKS Along X Axis

The stackoverflow community has a great solution for moving nodes in a sankey chart along the x axis (link here).
However, I noticed one cannot manually change the position of sink nodes (i.e. those nodes auto-assigned to the far-right). Because I am incorporating time into the sankey graph, I need to have certain sink nodes fixed at manually specified x positions.
Here is a JSFiddle example that needs this capability. Specifically, I need node "6": "Departed (6 mo.)" to be fixed to the x position '1'.
"nodes":[
...
{"node":6,"name":"Departed (6 mo.)","xPos":1}, // <-- need to move to position x=1; manual override not taking effect
...
Per the above-mentioned solution, I have updated computeNodeBreadths() within d3.sankey() and have included "xPos":1 within the node of interest; but the change is not taking effect.
Does anyone have a recommended update to the above-mentioned solution that allows one to manually adjust sink node x positions?
After some research, the answer is to comment out the line moveSinksRight(x) within the d3.sankey() method computeNodeBreadths(). Credit goes to Greg Ross: https://stackoverflow.com/a/21540569/4245462

D3 Tree layout with all leaves same distance from root

I'm using this example as a base D3.js Drag and Drop, Zoomable, Panning, Collapsible Tree with auto-sizing.
What I need is a tree where all the leaf nodes are the same distance from the root.
It should look something like the Cluster Dendrogram.
I would use the Cluster Dendrogram but it lacks the zooming, panning and collapsibilty options (I've cut out node dragging). Also the difference between the two examples is that one uses tree layout whereas the other cluster layout.
All your help and suggestions would be much appreciated.
It likely won't be easy to implement because the tree layout likes it's depth but you could do something like this.
nodes.forEach(function(d) {if(!d.children){
d.depth = 3; //3 should be replaced with whatever your lowest depth is
//you could write a function to find it too. let me know if you need that
}})
nodes.forEach(function (d) {d.y = d.depth * 300;});
this will accomplish part of what you are talking about but there is nothing to prevent the nodes from overlapping here. This post: Avoid overlapping of nodes in tree layout in d3.js about node spacing could potentially help

Concentric colours on D3 Sunburst diagram

I have a Sunburst diagram which uses essentially the same code as the standard at http://bl.ocks.org/kerryrodden/7090426 .
However, I have many many 'nodes' in my final two rings and any combination of colours makes it look extremely messy. As each node within the diagram is pulled from a database I'm unable to assign specific colours to values as the values are all unique.
Is there a way that I could specify a colour for the entirety of each individual ring in the diagram? As an example, I would like it to look somewhat like this:
http://www.design-by-izo.com/wp-content/uploads/2011/02/Krakow-3.jpg
That way I would be able to come up with a palette that doesn't clash as much as applying range of colours that d3 just cycles through.
From what I understand, you can simply change the fill style in the diagram, using depth of the respective data, like so:
.style('fill', function (d) {
return color(d.depth);
})
where color is some sort of a color array.
Alternatively, ES6/2015, just:
.style('fill', d => color(d.depth))
Here's a fiddle, showing you the effect: Fiddle
(based on this)
I hope this is what you want.

Setting Max Length of Links in D3 Tree Layout

I have a tree graph very similar to the one here: http://bl.ocks.org/mbostock/999346 and I would like to limit the spacing vertically of the nodes; if you look at the tree you will see that when there are just two nodes, they take up the entire canvas (the link between the two nodes is very long), and as other nodes are inserted, the link(s) are resized to fit. I would like to limit the link length to some max number so that the tree is more compact with fewer nodes.
Jason Davies' approach of looping over the nodes after d3.layout.tree has run and overwriting each node's y-value works well for me. (described in this d3 github issue comment)
So, something like
nodes.forEach(function(node){
node.y = (node.depth * 90); // 90px per level.
})

Label placement outside circles without overlap using layout.pack

I'm very new to d3 and I'm building a chart using d3.layout.pack.
I would like to place the text labels of every circle outside the circle, but without overlapping other labels or other circles.
Like this:
bubble chart using d3.layout.pack
Any ideas?
Thanks a lot
pd: this is what i've tried:
var nodes = d3.layout.pack()
.value(function(d) { return d.size; })
.size([w, h]).padding(333)
.nodes(data);
I would suggest another approach: to place labels/text along the top of the circles, and only for fairly large circles... This will not solve overlap problem completely, but visual organization will be better, in my opinion.
Here is the jsfiddle of an example illustrating the approach.
The details are described in another SO question/answer

Categories

Resources