force-layout | 易学教程

How to manipulate nodes based on dynamicaly changing text? (enter/exit/update)

阅读更多关于 How to manipulate nodes based on dynamicaly changing text? (enter/exit/update)

I am using d3.js with the force layout. Now, with the help of the dynamically changing array data it is possible to highlight nodes dynamically based on the array. Also with the code below i am able to show up dynamically the names of the nodes, which are part of the array, as a text. So, when the array has for example 3 entries, then 3 nodes are shown up and also 3 names of the nodes appear. Let's say their names are "a", "b", "c", so the text "a", "b", "c" appears on screen. Now, when i click on the new appeared text "a", then i want the node, which contains that name, to be filled green. I

Dragging on force layout prevents other mouseup listeners

阅读更多关于 Dragging on force layout prevents other mouseup listeners

问题 I want to enable dragging in a d3.js force layout. When dragging a circle and release the mouse button, I want to call a specific function via callback, like this: this.force = d3.layout.force() .nodes(this.nodes) .size([this.width, this.height]); // enable dragging this.circle .call(this.force.drag) .on("dragend", function() { console.log("You should see this, when releasing a circle."); }) .on("mouseup.drag",function(d,i) { console.log("Or see this."); }); Unfortunately the event is never

How to display and hide links and nodes when clicking on a node in D3 Javascript

阅读更多关于 How to display and hide links and nodes when clicking on a node in D3 Javascript

问题 I am trying to follow this D3 Javascript link: > http://bl.ocks.org/mbostock/1093130 to understand how the click event works. Unfortunately, I could not fully understand the whole codes. What I am trying to do at the moment is when clicking on the blue node, the other two nodes and their links will display. When I click on the same node again, the two nodes and their links must hide. In case I click on one of the other two nodes, nothing should happen. Here is the JSON file: { "nodes": [ {

Reposition nodes in a multi-foci d3 force layout

阅读更多关于 Reposition nodes in a multi-foci d3 force layout

问题 I have three sets of nodes in a multi-foci force layout. Each node is already rendered in HTML. The only thing that changes is the data bound to each little person. What I'm trying to do is when an event happens (in this situation a dropdown), the nodes reposition themselves to their new cluster. What I mean by that is, if new data calls for only 10 blues on the left and 90 reds on the right and 2 purples in the middle, the blues on the left will change to red and transition to the right

d3.js: how to create “force-directed graph clusters”

阅读更多关于 d3.js: how to create “force-directed graph clusters”

问题 I've been exploring the d3.js library, and especially the force directed graph creation. I perused the paper on it by Bostock et al, and noticed the precise type of graph I'm trying to create, basically a force directed graph with color coded regions surrounding groups of a feather. It's the illustration on 3rd column, 2nd row, here, labelled "force-directed graph clusters": http://vis.stanford.edu/papers/d3 the code here generates the basic graph: http://mbostock.github.com/d3/ex/force.html

d3 clustered force layout, distance between cluster center

阅读更多关于 d3 clustered force layout, distance between cluster center

(I'm a d3js newbie) I'm using the d3.layout.force to visualize a graph of nodes that are divided into clusters, basically something like this (even if in my version every cluster's node keep the gravity focus set to its cluster's center): http://bl.ocks.org/mbostock/1747543 What I'd like to accomplish is to keep each cluster separated from the other with a MIN distance. I set random points for each cluster center at initial stage: for(var i = 0; i < clusterLength; i++) { var baseX = 3 var baseY = 7 var x = halton(i + 1, baseX) * width + (Math.random() * 50) var y = halton(i + 1, baseY) *

D3 Force Directed Graph nodes in order

阅读更多关于 D3 Force Directed Graph nodes in order

I am using the Force Directed Graph to build a kind of flow diagram. It works fine except that the nodes have no specific order. They are random. I would like the graph to follow a hierarchical order. var force = d3.layout.force() .nodes(d3.values(nodes)) .links(links) .size([width, height]) .linkDistance(90) .gravity(0.6) .charge(-2000) .linkStrength(0.3); I want to give the nodes some (numerical) hierarchy. Not explicitly define their placement. Any help will be appreciated. You can use the force layout with a quantitative foci so the nodes are located based in its numerical hierarchy. A

Zooming and brushing in d3 force directed graph

阅读更多关于 Zooming and brushing in d3 force directed graph

问题 I'm having a problem in getting D3 to perform proper brushing when zooming is performed. I have a jsFiddle created here http://jsfiddle.net/Gwp25/2/ showing the network with some dummy data I found elsewhere. The operation to follow is this. Zoom in (using mousewheel), then turn on brushing. After doing this, brush the nodes. The nodes that are selected are off - some out of the brush area. Here is the relevant part of the code dealing with the selecting of nodes within the brush extent. .on(

D3.js force layout - edge label placement/rotation

阅读更多关于 D3.js force layout - edge label placement/rotation

问题 I'm pretty new with D3.js, and I've been playing around with force layout. One of the things I tried was placing labels on links. One way of doing it is by appending svg:text and manually calculating translate & rotate , which works fine with straight lines. But, in case when link is a svg:path (e.g. arc), this doesn't work as expected. In these cases, svg:textPath is suggested solution. In this demo, you can see a simple implementation of adding labels to links through svg:textPath . The

Create node cluster's focal points by data attribute in d3?

阅读更多关于 Create node cluster's focal points by data attribute in d3?

I'm trying to force nodes into different clusters in force layout based on a certain attribute in the data like "group." I'm adapting the code from Mike Bostock's multi foci force layout example ( code , example ) and I've been successful in adding in my own data but I haven't been able to specify how many clusters there are and how to assign a node to a cluster. I'm relatively new to d3 and JavaScript and I haven't been able to find many examples of multi foci applications. Here's my d3 code, any help or input is appreciated: var width = 960, height = 500; var fill = d3.scale.category10(); d3