force-layout

I have a force layout that I have created using d3.js I would like to have both the normal functionality of a draggable force layout as well as the ability to zoom. I have basically copy/pasted the zooming code from ( http://jsfiddle.net/nrabinowitz/QMKm3/ ). This is the same way of zooming that Mike Bostock uses in ( http://bl.ocks.org/mbostock/3680957 ). Here is my code: http://jsfiddle.net/kM4Hs/6/ The zooming works fine, but I am unable to select single nodes in the force layout and drag them around. I have found the culprit to be the fact that both authors use d3.v2.js rather than the

I am new to D3 and having trouble setting the bounds for my force directed layout. I have managed to piece together (from examples) what I would like, but I need the graph to be contained. In the tick function, a transform/translate will display my graph correctly, but when i use cx and cy with Math.max/min (See commented code), the nodes are pinned to the top left corner while the lines are contained properly. Here is what I have below... what am I doing wrong?? var w=960, h=500, r=8, z = d3.scale.category20(); var color = d3.scale.category20(); var force = d3.layout.force() .linkDistance(

How to apply force repulsion on map's labels so they find their right places automatically ? Bostock' "Let's Make a Map" Mike Bostock's Let's Make a Map (screenshot below). By default, labels are put at the point's coordinates and polygons/multipolygons's path.centroid(d) + a simple left or right align, so they frequently enter in conflict. Handmade label placements One improvement I met requires to add an human made IF fixes, and to add as many as needed, such : .attr("dy", function(d){ if(d.properties.name==="Berlin") {return ".9em"} }) The whole become increasingly dirty as the number of

Many cases have been shown for force directed graph geometric zooming by SVG Geometric Zooming . In geometric zooming, I only need to add a transform attribute in zoom function. However, in semantic zooming, if I only add a transform attribute in node, links won't connect to node. So, I am wondering whether there exist a solution for geometric zooming for force directed graph in d3. Here is my example with geometric zooming following previous case. I have two problems: When I zoom out, then drag whole graph, the graph will strangely disappear. Using the same redraw function function zoom() {