force-layout

New to d3 and trying to develop a force directed tree into which we can plug varioss dataset. I've managed to get the basic idea up and running but would like to make the links curved so I can deal with multiple links. I've looked at http://bl.ocks.org/1153292 and I'm just not getting it. The nearest I get is it all working with no path visible. This is my code for straight lines, I'd appreciate some help if you've got the time Thanks: //Sets up the svg that holds the data structure and puts it in the div called mapBox var svg = d3.select("div#mapBox.theMap").append("svg") .attr("width",

I have a working code example (only the <script type="text/javascript"> part) of a static graph using d3.js as below: /* Create graph data */ var nodes = []; for (var i = 0; i < 13; i++) { var datum = { "value": i }; nodes.push(datum); } var links = [{"source": 0, "target": 1}, {"source": 1, "target": 2}, {"source": 2, "target": 0}, {"source": 1, "target": 3}, {"source": 3, "target": 2}, {"source": 3, "target": 4}, {"source": 4, "target": 5}, {"source": 5, "target": 6}, {"source": 5, "target": 7}, {"source": 6, "target": 7}, {"source": 6, "target": 8}, {"source": 7, "target": 8}, {"source": 9,

I have a graph using force layout, but it has a fixed width w and height h : var svg = d3.select("#viz").append("svg") .attr("id", "playgraph") .attr("width", w) .attr("height", h) var force = d3.layout.force() .nodes(nodes) .links(links) .charge(-1600) .linkDistance(45) .size([w, h]); which results in a svg graph that does not scale or down despite of changes in screen or browser window size. In order to make it responsive (i.e. automatically resizes itself), I tried using viewBox and preserveAspectRatio attributes: var svg = d3.select("#viz").append("svg") .attr("id", "playgraph") .attr(

Using a force directed graph, how do you get a link to actually show up when the target and source are the same node. So basically just a nice little loop indicating that such an edge exists. There are two D3 examples that I already used or tried to use: I'm using http://bl.ocks.org/d3noob/5155181 to show direction, and the little endpoint arrow will show up pointing at itself, but no link line. http://bl.ocks.org/GerHobbelt/3616279 does does allow for self referencing and I even sort of got it to work with my data, but it is crazy complicated. mes5k The trick is to draw the self link as a

I am using the force-directed graph in the sample here - http://bl.ocks.org/mbostock/4062045 But since my data is directed, I need the links in the graph to be represented as arrow connections. Maybe like in, http://bl.ocks.org/d3noob/5141278 . Can someone please suggest the alterations or additions that create a directed graph as in http://bl.ocks.org/mbostock/4062045 I am new to D3, and I couldn't find a solution, maybe its trivial, but a little help is appreciated. Merging these two examples is straightforward, and I created a JSFiddle to demo . First, add the definition of the arrow style