D3.js: Tree layout with variable distance between branches - javascript

I'm developing a complex horizontal tree graph with d3 and the d3.layout.tree() function. Now I'm in a point where I need to display a list in each node with a fixed depth (e.g. 4), and these lists have variable height.
One way to manage this is to set a chart height so no nodes get overlapped, but I have to consider the case that all the nodes have the longest list. This makes the chart extremely long and visually ugly, so I wonder if it is a way to set the vertical distance between the horizontal branches dynamically.
I've tried the nodeSize property but again, it has to be the same for all the nodes. If there is no possible way to do this, how would you tackle this problem? I've already set a modal to show all the information, but these lists are mandatory and have to be in the tree chart.
Thanks

Related

D3.js animated grouped bar chart with variable number of groups

I am trying to adapt the animated grouped bar chart example from
https://bl.ocks.org/aholachek/fb0c1cd7ea9707bc8ff55a82402c54b1
for my own purposes. One modification that I am stuck at right now is that my data will have a variable number of groups and the xAxes and blocks have to resize accordingly.
I have already added the resizing of the domains with
x0.domain(data[Object.keys(data)[0]].map(obj =>obj.name))
x1.domain(valueKeys).rangeRound([0, x0.bandwidth()])
in the update function, but this does not seem to be enough. While the width of the bars is resized correctly, the x values are not spaced out evenly and instead get pushed into the far right corner of the graph when adding more elements after the initial creation for example.
For now I only care about the grouped version, not the stacked one.
I would appeciate any pointers
Problem could be solved by clearing out the barContainer before the update. This of course prevents transitions on the already existing bars, but that is good enough for me

Multiple forces in d3

Hi I have the following graph.The rectangles represent groups where the nodes inside or on the border of the rectangle are restricted to that rectangle. I am using d3 force layout to layout the nodes but then restrict them to the bounding rectangles in the tick.
What I need is,
1. One force layout to handle the nodes as they currently do
2. A second force layout that handles the rectangles in the graph, so that rectangles don't overlap with each other.
It would be an added bonus if the rectangles could also be stopped from overlapping with nodes that are outside the rectangles to avoid confusion.
Can anyone point me to an example that does something similar or code something up quickly to demonstrate how this can be achieved.
Thanks.

Prevent node overlap in force directed graph

I have build a force directed graph for the social network analysis.
The problem which I am facing is that nodes keeps on overlapping each other,
How can I prevent overlapping of node in force directed graph ?
Here is my code with dummy data
And following is the image for my force directed graph
How can I remove overlapping of these nodes ? and how can I keep atleast some distance between links so that links are properly visible ?
There are two approaches to avoiding overlap in a d3 force layout.
The first is to adjust the parameters of the force object, the most relevant of which is the "charge" parameter. Nodes with negative "charge" values push other nodes away (versus nodes with positive values pull other nodes closer), and you can increase the amount of charge to cause a greater push.
The default value for the "charge" is -30, so from there you can adjust it until you get an effect you want. There's no simple formula for determining the value you want, since it also depends on the other parameters and the amount of links in your graph.
If for any reason adjusting the charge doesn't work for you (for example, if you want the nodes to cluster close to each other -- not repel each other -- but still not overlap), then you can manually check for overlapping nodes, as in this Mike Bostock example suggested by Josh in the comments.

d3 Sankey - Is it possible to affect or decide the placement of nodes?

I'm working with the Sankey plugin for d3.js. Is there a way to affect the automatic placement of the nodes?
If you compare the below 2 images.
Automatically generated Sankey Diagram: https://files.secureserver.net/0s3DEU5s3OZtqL
After I have manually re-arranged it: https://files.secureserver.net/0sYJF1w7f54wdF
You see that the nodes are aligned centered after each other which make it hard to use the diagram until you manually rearrange the nodes. Can I affect this flow somehow - or is it just the way it is?
By the way - Is there a way to specify that the text for the nodes should not be longer than the height of the nodes?
According to the demo and its explanation, there is no way to affect the placement (and a brief look at the source confirms that). Similarly, there's no way to specify that the text for the nodes should not be longer than the height of the nodes.

D3.js Force Layout - showing only part of a graph

Good morning,
just starting with the awesome d3js library ...
I want to show only a portion of a graph with the force directed layout. The idea is to have one node declared as the "center" and show all nodes within a distance of two (for example) from this center node, the neighbors of the center node and the neighbors of the neighbors. If the user clicks on one of the displayed nodes it becomes the "new" center node and a different "subgraph" is displayed. I wonder if there is an example around implementing this kind of subgraph layout and if some kind of a "node-distance" algorithm is already implemented in d3js.
Thanks a lot
martin
UPDATE:
Just found the example Modifying a Force Layout which illuminates how to add and remove nodes and edges from a force directed layout.
I just uploaded a "proof of concept level" of an interactive force directed subgraph.
http://justdharma.com/d3/sub-graph/
In this example I use backbonejs under the hood. Being the first time I implement something with backbonejs, I for sure use it in a very crude manner. While this example might illuminate one way how an interactive sub-graph can be achieved it is for sure not a template how to do it - as said just a proof of concept hack ...
This isn't implemented in D3, and I'm not aware of any examples. What you would have to do is the following:
Set the fixed attribute of the new center node to true to prevent the force layout from changing its position.
Set the px and py attributes of that same node to the center position.
For each node in your force layout, compute the shortest path to the new center node.
Depending on the length of the path in each case, either remove the node or keep it.
The trickiest part here is the computation of the path from each node to the new center, but even this is a pretty standard algorithmic problem. Another thing to keep in mind is that you need to modify the data structures that contain the nodes and links of the force layout in place, i.e. you can't set new nodes and links for the force layout and expect everything to work smoothly.

Categories