force-layout | 易学教程

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

How to modify a d3 force layout with voronoi polygons to trigger events on grouped elements?

阅读更多关于 How to modify a d3 force layout with voronoi polygons to trigger events on grouped elements?

问题 The goal is to combine d3 force simulation, g elements, and voronoi polygons to make trigger events on nodes easier, such as dragging, mouseovers, tooltips and so on with a graph that can be dynamically modified. This follows the d3 Circle Dragging IV example. In the following code, when adding the clip path attribute to the g element and clippath elements: Why does dragging not trigger on the cells? Why do the nodes become obscured and the paths lose their styles on edges? How can this be

Force Directed Graph Error, “Cannot Read Property 'Push' of Undefined”

阅读更多关于 Force Directed Graph Error, “Cannot Read Property 'Push' of Undefined”

问题 I am new to coding and recently began using d3 to generate a force directed graph. I successfully generated a four node graph when using the links to derive the nodes. However, when I explicitly list the nodes I receive the error "Uncaught TypeError: Cannot read property 'push' of undefined (d3.v3.min.js)". I have studied responses to the following two similar questions but have been unable to resolve this issue using the answers. I attempted to remove as many of the non-relevant features as

Adding and removing nodes and links from force diagram in d3 based on filter dropdown

阅读更多关于 Adding and removing nodes and links from force diagram in d3 based on filter dropdown

问题 I'm trying to make a force diagram, with a couple of drop down boxes which filter the data on display. The first one (which is where I'm almost at now) checks for the type, and only shows nodes & links which have a source or target matching the type. What I have now, is the ability to select the filter, and the graph updates, it removes unnecessary nodes, and reformats the remaining ones to be correct. But it only works the first time. If I 're-filter' it starts to go haywire. Here's my full

Is there a tap and double tap event in d3.js force directed graph

阅读更多关于 Is there a tap and double tap event in d3.js force directed graph

问题 I am working on a force directed graph using d3.js. I need to handle tap and double tap event on nodes for mobile devices. Mouseover and click functions need to replicated as tap and double tap in d3.js. I have managed to get a touch event working but have no clue on how to capture double tap event in a mobile device. 回答1: D3 has the touches event and using this you can get touch position coordinates from inside your event handler, but this doesn't give you any special handling for or help

Cannot select SVG foreignObject element in d3

阅读更多关于 Cannot select SVG foreignObject element in d3

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

D3.js - Is it possible to animate between a force-directed graph and a node-link tree?

阅读更多关于 D3.js - Is it possible to animate between a force-directed graph and a node-link tree?

问题 I am using the D3.js library and looking at the force-directed graph demo: http://mbostock.github.com/d3/ex/force.html I am also looking at the node-link tree: http://mbostock.github.com/d3/ex/tree.html What I would like to do is: - Start with the force-directed graph and when the user clicks on a node, have it animated smoothly into a tree, with the selected node in the center. - Then, when the user clicks on any empty space in the canvas, it should animate back to the force-directed graph.

Add text label to d3 node in Force directed Graph and resize on hover

阅读更多关于 Add text label to d3 node in Force directed Graph and resize on hover

问题 I am trying to add text label to nodes in d3 Force Directed Graph, there seems to be an issue. This is my Fiddle: When I add the node name like this: node.append("text") .attr("class", "word") .attr("dy", ".35em") .text(function(d) { console.log(d.name); return d.name; }); There's no change but the names are getting logged. When i tried using bounding box , the node labels appeared but the nodes are stacked up on the top-left corner of box while the node links are fine.This fiddle is the

clicking a node in d3 from a button outside the svg

阅读更多关于 clicking a node in d3 from a button outside the svg

问题 I have created a force directed graph using D3 and displayed the id of the nodes in a normal div. I need to highlight the node whose id has been clicked in the div. I have searched the id of the node and using normal javascript tried to click it but it does not work. 回答1: More generally, if the user interacts with element A , how do you select (and then modify) related elements B ? There are many ways of achieving this, but here are three common approaches. Option 1. For one-to-one mappings,

d3.js Force Chart - image/node linkage and animation

阅读更多关于 d3.js Force Chart - image/node linkage and animation

问题 I've enhanced a force diagram to compare two profiles. I am trying to have the main node take on an image http://jsfiddle.net/LsMZp/5/ how do I get the image to be centrally aligned (sized correctly) and the thumbnail data passed in more dynamically from the json string. also if someone shares a particular interest - is there a better way of handling it - if the information is duplicated a link is formed but a nomad node remains left and unlinked. also is there a way to provide a stir of