force-layout

d3.js force directed graph search

由 北城以北 提交于 2019-12-22 10:24:06
问题 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. 回答1: When you d3.select("svg") you're selecting the SVG canvas and setting

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

由 本小妞迷上赌 提交于 2019-12-22 05:24:21
问题 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:

d3: force directed graph: node filtering

由 左心房为你撑大大i 提交于 2019-12-21 09:06:19
问题 I was going through the following post: highlight selected node Really a nice solution... I am a newbie to d3 and fascinated with its flexibility. I am facing problem at one point. Instead of filtering the nodes on mouseover, I want to filter it on the basis of text entered (node name or id) in a html textbox. Any idea how to achieve this?? Regards 回答1: I actually had to do something like this for a project at work. The solution I came up with was to give each node a boolean property which I

json representation for d3 force directed networks

由 喜夏-厌秋 提交于 2019-12-21 05:22:15
问题 I am trying to make a network visualisation of RISK. You can view it with the required code at http://bl.ocks.org/4683850. The visualisation works but it required a lot of manual labor. I manually adapted the json file such that the connections were of the following shape: { "source": 1, "target": 0, "value": 5 } What would one need to do to the d3 code such that a connection is determined by the names of the nodes? The input would then be: { "source": "WesternAustralia", "target": "NewGuinea

How do I control the bounce entry of a Force Directed Graph in D3?

由 烈酒焚心 提交于 2019-12-21 04:43:14
问题 I've been able to build a Force Directed Graph using a Force Layout. Most features work great but the one big issue I'm having is that, on starting the layout, it bounces all over the page (in and out of the canvas boundary) before settling to its location on the canvas. I've tried using alpha to control it but it doesn't seem to work: // Create a force layout and bind Nodes and Links var force = d3.layout.force() .charge(-1000) .nodes(nodeSet) .links(linkSet) .size([width/8, height/10])

D3 force layout: making pan on drag (zoom) smoother

由 懵懂的女人 提交于 2019-12-21 04:16:11
问题 I've got a d3.js static force layout graph that can get rather big (sometimes parts of it are clipped), so I'd like to let the user pan the whole graph by dragging. I don't think I need dragging of individual nodes, I've got a feeling that's just going to be confusing, but would like to make it possible to show the parts of the graph that are clipped by the svg boundaries. I've got a minimal example at http://bl.ocks.org/3811811 which uses visF.append("rect") .attr("class", "background")

Does d3.js force layout allow dynamic linkDistance?

由 北战南征 提交于 2019-12-21 03:49:35
问题 I'm using the force layout to represent a directed unweighted network. My inspiration comes from the following example: http://bl.ocks.org/mbostock/1153292 My problem is that in my case there much more links between nodes and I have the feeling that giving a fixed linkDistance, which is always the same, is a very big constraint for my layout. Is it possible to set a dynamic linkDistance , such that a link grows in length if it's useful to reduce link crossing inside the graph? 回答1: From the

d3.js force directed layout constrained by a shape

由 妖精的绣舞 提交于 2019-12-21 01:19:20
问题 I was wondering if there is a way to create a force directed layout with d3.js and restrict it by an arbitrary shape in such a way that all the nodes are equivalently distributed within the shape and the distance between the border and the nodes is equally to the distance between the nodes I hope there is already such a solution out there. Otherwise my idea is to start with the force directed layout and check the distances from the nodes to the borders in each iteration. Any suggestions from

Space out nodes evenly around root node in D3 force layout

由 夙愿已清 提交于 2019-12-20 10:39:36
问题 I am just starting on D3, so if anyone has any general suggestions on thing I might not be doing correctly/optimally, please let me know :) I am trying to create a Force Directed graph with the nodes spaced out evenly (or close enough) around the center root node (noted by the larger size). Here's an example of the layout I'm trying to achieve (I understand it won't be the same every time): I have the following graph: var width = $("#theVizness").width(), height = $("#theVizness").height();

D3.js Force Layout - showing only part of a graph

由 大城市里の小女人 提交于 2019-12-20 03:47:08
问题 Good morning, just starting with the awesome d3js library ... I want to show only a portion of a graph with the force directed layout. The idea is to have one node declared as the "center" and show all nodes within a distance of two (for example) from this center node, the neighbors of the center node and the neighbors of the neighbors. If the user clicks on one of the displayed nodes it becomes the "new" center node and a different "subgraph" is displayed. I wonder if there is an example
订阅 force-layout