force-layout

Can d3.js layout.force be used to (re)position non-svg elements like div's? If div's have position: absolute; maybe left and top could be used as a equivalent for the x1 and y1 attributes as used for the svg elements? The goal is to have some force effects on images and menu items with IE8 support. I'm aware of the fact that svg nodes can be images but as I need to support IE8 this is not an option. If not possible, is using svgweb together with d3.js a stable option for this purpose? Thanks! **Update** D3 is cool!! I'm starting to get the hang of it and it sure is possible to use " the force

I'm studying d3.js force chart and I have a question. Is it possible to make a force chart inside a triangle with some coordinates? Here is my code: var width = 500; var height = 500; //margin var marginLeft = 10; var marginTop = 10; var marginRight = 10; var marginBottom = 10; var margin = { left: marginLeft , top: marginTop, right: marginRight, bottom: marginBottom}; //size of canvas var innerWidth = width - margin.left - margin.right; var innerHeight = height - margin.top - margin.bottom; var radius = 10; var svg = d3.select(".forcechart").append("svg") .attr("width", width) .attr("height",

I'm new to javascript and D3.js, and I am trying to understand how it all works. I have been playing with the force-directed graph example here: http://bl.ocks.org/mbostock/4062045 What I want to do, is to change the JSON links from being array numbers to node names. I'm trying to visualize a small network topology, and I have the node neighbors all set up. Here is the JSON data I would like to use: { "nodes":[ {"name":"stkbl0001","group":1}, {"name":"stkbl0002","group":1}, {"name":"stkbl0003","group":1}, {"name":"stkbl0004","group":1}, {"name":"stkbl0005","group":1} ], "links":[ {"source":

Is there an example of searching for an element in a d3js layout (force directed or tree) and highlighting that element? I am thinking that there would be a text field where user enters values to search. I wrote a tool that allows browsing biological regulatory networks , showing two SVG panels side-by-side. Each panel contains a force-layout network of transcription factors (the nodes), as drawn by the d3.js API. You can type in the name of a transcription factor and it will highlight it using the same code as is used when a mouseover event occurs. Exploring the code might give you some

I've been able to build a Force Directed Graph using a Force Layout. Most features work great but the one big issue I'm having is that, on starting the layout, it bounces all over the page (in and out of the canvas boundary) before settling to its location on the canvas. I've tried using alpha to control it but it doesn't seem to work: // Create a force layout and bind Nodes and Links var force = d3.layout.force() .charge(-1000) .nodes(nodeSet) .links(linkSet) .size([width/8, height/10]) .linkDistance( function(d) { if (width < height) { return width*1/3; } else { return height*1/3 } } ) //

I've got a d3.js static force layout graph that can get rather big (sometimes parts of it are clipped), so I'd like to let the user pan the whole graph by dragging. I don't think I need dragging of individual nodes, I've got a feeling that's just going to be confusing, but would like to make it possible to show the parts of the graph that are clipped by the svg boundaries. I've got a minimal example at http://bl.ocks.org/3811811 which uses visF.append("rect") .attr("class", "background") .attr("width", width) .attr("height", height) .call(d3.behavior.zoom().on("zoom", redrawVisF)); function

I would be interested to know exactly what algorithms D3 uses to achieve the force-directed graph feature in the library. Having read Kobourov's summary of the history of force-directed graphs left me a bit baffled as to what is the exact algorithm or method (combination of algorithms / heuristics) used in the library. D3 API reference says Barnes-Hut algorithm is used to calculate the charges acting on bodies, an O(N*log(N)) operation. Kobourov's article mentions that Quigley-Eades algorithm, and Hu's algorithm are multilevel algorithms that make use of Barnes-Hut. Is one of them utilized in

I'm working with a d3 force-directed layout with HTML node labels implemented with SVG foreignObject elements. I'd like to select these elements at various times to update their positions and other properties (and track them as they are created and destoryed with enter() and exit() ), but I don't seem to be able to select them like other SVG elements. Here is a compact example: HTML: <html> <head> <title>Cannot Select SVG Foreign Object</title> <script src="http://d3js.org/d3.v2.js"></script> <script src = "fo_select.js"></script> </head> <body> <svg id="example_svg" width="600" height="600">