force-layout

Circle packs as nodes of a D3 force layout

由 淺唱寂寞╮ 提交于 2019-12-05 22:25:45
Here is jsfiddle : This is really good if you have, let's say, 2 political parties, and you want to present election results across several voting units, or similarly structured data. However, I need to visually represents this: (5 political parties instead of 2) (please ignore all raws except "seats"; only "seats" are supposed to be visualized) I would like to have a circle pack inside each force layout node . For example, there should be a balloon called BC containing four smaller circles with areas proportional to 21, 12, 2, 1 (one political party didn't win any seat in BC - British

d3.js force directed graph search

由 有些话、适合烂在心里 提交于 2019-12-05 20:51:30
I am trying to implement a search function on a d3 force directed graph example. When I type in the search query in the text field, relevant items will be shown and the irrelevant ones will fade out. I have implemented the methods searchUpdate and count as shown in the following jsfiddle . I need some help to fade the items. Currently d3.select("svg") fades the whole graph, while d3.select("#"+n.id) produces an error. Elijah When you d3.select("svg") you're selecting the SVG canvas and setting its opacity . What you want to do is d3.selectAll("circle") or d3.selectAll("circle.node") and apply

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

由 旧时模样 提交于 2019-12-05 17:38:08
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": [ { "name": "Node1", "group": 2 }, { "name": "Node2", "group": 1 }, { "name": "Node3", "group": 1 } ], "links

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

由 南笙酒味 提交于 2019-12-05 09:44:30
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 My question is: what is the code to dynamically generate the region polygons? You could try integrating

Why does my d3 force-directed graph not display edges?

由 社会主义新天地 提交于 2019-12-05 07:45:43
I created a simple force-directed graph using d3: http://goo.gl/afHTD Why are the edges of the graph not showing? Here is my entire HTML file. You could also see it and tinker with it by going to view source on my linked page of course. It is based on the example from the d3 website. <!DOCTYPE html> <html> <head> <title>Force-Directed Layout</title> <script type="text/javascript" src="d3.v2.js"></script> <style type="text/css"> div.node { border-radius: 6px; width: 12px; height: 12px; margin: -6px 0 0 -6px; position: absolute; } div.link { position: absolute; border-bottom: solid #999 1px;

generate clipPaths for multiple elements in d3.js

由 假如想象 提交于 2019-12-05 04:29:11
问题 I am trying to create partially filled circles like the ones in the final NYT political convention visualization: http://www.nytimes.com/interactive/2012/09/06/us/politics/convention-word-counts.html The two clearest code examples I've found for clipPaths in d3 ( https://gist.github.com/1067636 and http://bl.ocks.org/3422480) create individual div elements with unique ids for each clip-path and then apply these paths to single elements. I can not figure out how to go from these examples to a

Force chart d3.js inside a triangle

由 老子叫甜甜 提交于 2019-12-05 02:20:36
问题 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;

D3.js force layout - edge label placement/rotation

由 十年热恋 提交于 2019-12-05 01:24:54
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 only problem with it is that, in case when source is positioned to the right of target, text is rendered

modifying the d3 force-directed graph example

由 Deadly 提交于 2019-12-04 23:40:14
问题 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

What algorithms does D3.js use for the force-directed graph?

由 假如想象 提交于 2019-12-04 18:15:30
问题 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
订阅 force-layout