force-layout | 易学教程

D3-Force updating parameters after initializing graph

阅读更多关于 D3-Force updating parameters after initializing graph

问题 In D3 v4 with the force module, how do you update the parameters of the simulation once you have initialized the graph? More precisely, I am trying to change the .forceLink and .forceManyBody of the force directed graph when the user clicks one of its nodes. var node = svg .append("g") .attr("class", "gnodes") .selectAll(".node") .data(graph.nodes) .enter() .append("g") .attr("class", "node") .on('dblclick', connectedNodes); //calls for change in simulation parameters So far I have been able

How can I show a graph using d3 force layout with initial positions set and no movement at all?

阅读更多关于 How can I show a graph using d3 force layout with initial positions set and no movement at all?

问题 I use d3 force layout to construct a graph, and then store the positions of the nodes in a database. The next time I want to show the graph, I read the positions from the database into the nodes and then I start the force layout. That causes the layout to move slightly. Is there I way to show the graph with the stored node positions without calling force.start() at all? What I want is a "read only" mode to show a stable graph created by someone else earlier. /Hans 回答1: I recommend you to read

NaN on Force-Directed Layout Append in D3.js

阅读更多关于 NaN on Force-Directed Layout Append in D3.js

问题 I'm using a force-directed layout in D3 that grabs data from a JSON file and then, when one of the nodes is double-clicked, queries the database to find links to that node and updates the links and nodes arrays attempting to append the new data to the viz. It seems when the nodes are appended without links, they work fine, but the links to the xy coordinates end up being NaN. You can see the effect here, just double-click on one of the nodes: http://blockses.appspot.com/2432083 回答1: I fixed

D3, SVG, and Javascript : Need to assign unique images to dynamically created nodes

阅读更多关于 D3, SVG, and Javascript : Need to assign unique images to dynamically created nodes

问题 I'm playing with the following Javascript + SVG + D3 code. http://bl.ocks.org/1095795 The code is here: https://gist.github.com/1095727 In short, I need unique images for each node (instead of the duplicated smiley face image as it's pulling now), but I'm not savvy enough to make it happen. Any help would be appreciated. <!DOCTYPE html> <html> <head> <script type="text/javascript" src="http://mbostock.github.com/d3/d3.js"></script> <script type="text/javascript" src="http://mbostock.github

How do I replace a node with an image using D3 and CoffeeScript for a network visualization?

阅读更多关于 How do I replace a node with an image using D3 and CoffeeScript for a network visualization?

问题 I've been attempting to solve this problem for days, and am completely stumped. I'm using this network implementation walk-through: http://flowingdata.com/2012/08/02/how-to-make-an-interactive-network-visualization/ I have successfully created my visualization through this walk-through, and now would like to replace a node with a small picture, based on the node's value. This is a great example of code to work from, where every node was replaced with an image. http: //bl.ocks .org/mbostock

Search for an element in D3 - force layout or tree

阅读更多关于 Search for an element in D3 - force layout or tree

问题 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. 回答1: 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

Center force directed layout after tick using root node (return to center)

阅读更多关于 Center force directed layout after tick using root node (return to center)

问题 I am experimenting with force directed layout using D3.js. What I need is center the layout by root (or other selected node) and return this node to the svg (e.g. canvas) center after the tick function is done (the graph alpha is low). Is it possible? I found an example at http://bl.ocks.org/1080941 but I am unable to make the root (when using aplha or other custom tick function calculation) return back to the center (center the layout by this particular node). Any help would be appreciated.

Change the collision behavior of many nodes stored in an array

阅读更多关于 Change the collision behavior of many nodes stored in an array

when using the force layout in d3.js it is possible to push nodes away with the help of the collision force by increasing an imaginary radius that surrounds the nodes. I created a seperate button named button and i want to use .data() (to select a whole array) to increase the collide radius into 40 of many nodes when click on that button. For example when a filtered number of nodes is stored in an array called abc , i tried this code: var node =...... .on("click", function(d, i) { abc = start && start.path(d) || []; node.style("fill", function(n) { if (n == start ) { return "yellow"; } else if

Force layout drag behaviour with transition on zoom but no transition on drag

阅读更多关于 Force layout drag behaviour with transition on zoom but no transition on drag

问题 I think the question is very easy. I have this site for you for demontrating what I mean: http://arda-maps.org/familytree/ So if you add some persons there to the screen you are able to drag and zoom the view. The zooming is totally fine. The duration for zooming is great. But I don't like the duration when dragging and would like to disable it just there. Basically this is the code: g.transition().duration(450).attr("transform", "translate(" + zoombuttonTranslate + ")scale(" +

Change the collision behavior of many nodes stored in an array

阅读更多关于 Change the collision behavior of many nodes stored in an array

问题 when using the force layout in d3.js it is possible to push nodes away with the help of the collision force by increasing an imaginary radius that surrounds the nodes. I created a seperate button named button and i want to use .data() (to select a whole array) to increase the collide radius into 40 of many nodes when click on that button. For example when a filtered number of nodes is stored in an array called abc , i tried this code: var node =...... .on("click", function(d, i) { abc = start