Develop Reference

How to define the node entering position in D3 js force layout

I am trying to implement a radial force layout in D3.js , I saw a similar example but i am stuck on how to initiate the node positions in the layout.
http://bl.ocks.org/vlandham/5087480
Thanks in Advance

Initialising a position is just done by setting the cx and cy positions. The most logical place is where the radius is currently being set i.e.
.attr("r", 10)
.attr("cx", 5) //added
.attr("cy", 5) //added
Of course, you can do something more exotic if you are using the bound data to initialise position.
This will only set the starting point though - the force layout will then take over and position elements. The advantage is that you can potentially reduce some of the initial node movement if you get it right.

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

D3 Force Layout - No overlapping links

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

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

D3 physical gravity

I'm trying to design a simulation of physical gravity with the D3 library, but I'm not having a lot of luck. The 'layout' API reference states that physical gravity can be implemented through a positive 'charge' parameter, but I'm unsure of how this would work.
What I'm attempting to implement at the moment is a single SVG element that contains multiple variably-weighted and -sized rects rising at different speeds eventually going out of the viewport -- their weights will define the velocity at which they rise. (Basically, I'm just trying to implement a global gravitational pull from beyond the top of the viewport.)
Is there a feasible way of doing this in accordance with the D3 force layout? I'm just looking for conceptual solutions, but examples and code snippets are appreciated as well.
Thanks in advance!

Here is couple ideas:
You can directly modify vertical position of node in tick event handler:
force.on("tick", function(e) {
nodes.forEach(function(o, i) {
o.y -= o.weight / 30;
});
node.attr("cx", function(d) { return d.x; })
.attr("cy", function(d) { return d.y; });
});
You need to set force.gavity(0) for this approach.
Or you can use force.gravity: it pulls nodes towards layout center, you can specify svg transfromation to shift layout center above viewport