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

问题 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

问题 I have a force directed graph with different size nodes. I want to display a custom icon in the middle of each path connecting two nodes. From the d3 examples I found the way to display images within the nodes. However, when I try the same technique on the paths, the images are not shown. var path = svg.append("svg:g").selectAll("path").data(force.links()); var pathEnter = path.enter().append("svg:path"); pathEnter.attr("class", function(d) { return "link " + d.target.type; }) pathEnter

问题 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!

问题 I need to evenly distribute a bunch of axis-aligned sliding rectangles constrained by a maximum width/height and by some horizontal/vertical coordinates depending from the position of the sliding shapes itself. Rectangles are constrained in one direction, can slide along the other axis, may not overlap and not step over as well. This question is based on: How to implement a constraint solver for 2-D geometry? and Spektre's well accepted proposal for a force-driven constraint solver. The whole

问题 I am working on a simple force directed graph as given in This link. It works well but I want to show tool-tip on edges also as it shows on nodes. Whenever I move the mouse on an edge, it shows some tool-tip on the link (data may be retrieved from JSON file). Is there a builtin method or I have to show the div on mouse-over (in this case how to get the position of mouse, where the div would be shown) 回答1: Is there a builtin method? Ans : Yes. There is a built in way. Most HTML elements

问题 Using the force layout in d3, I can happily add nodes as, say, an SVG group of a circle and some text: var node = vis.selectAll(".node") .data(nodes) .enter().append("svg:g") .attr("class", "node"); node.append("svg:circle") .attr("r", 5); node.append("svg:text") .text(function(d) { return d.nodetext }); However, I would like to optionally add another element to the group, dependent on the node data: so if the data for this node contains an "image" attribute, I'd like to add a new child

问题 I use the force layout in D3.js v4. Now I want to click on a node and use the force physics like collide for that one node only. The simulation for every node on the entire SVG is this: var simulation = d3.forceSimulation() .force("link", d3.forceLink().id(function(d) { return d.index })) .force("collide", d3.forceCollide(function(d) { return d.r + 8 }).iterations(16)) .force("charge", d3.forceManyBody()) .force("center", d3.forceCenter(chartWidth / 2, chartWidth / 2)) Now I want to change

问题 I am building a "spring" using the d3-force layout. I want to manipulate it's properties like "strength" and "distance" via user input. For that I am currently using an "input range slider". For better understanding I set up a working draft on codepen where this question is related to: http://codepen.io/bitHugger/pen/XNqGNE?editors=1010 The HTML: <input id="strengthElem" step="0.1" type="range" min="0" max="2"/> I wanted to do the event handling something along like this: let strengthElem =

问题 I want to draw a hull around a grouped force directed graph build with d3. I have build the graph with the circles. But I now want to join the intersections of the circles with a path(hull). If not joining the intersections, Drawing a hull surrounding the group of circles is enough. I tried the Force-Directed Layout with Convex Hull example. But I have the text and circles covering the text and links connecting the texts. var vertices = new Array(); var width = 960, height = 500; var color =