force-layout

问题 I am having very interesting layout problem. I have football match data, particularly the number of successful passes been made between the players and the captain of the team. We don't care about the passes made between the players who are not the captain of the team. So the root node will be Captain, each leaf will present each player and all the links we are going to have is just the ones between root node and every leaf node. No links between leaves. I would like the root node sit at the

问题 I am trying to expand this force layout example by changing a nodes' shape from circle to rectangle when it is clicked. So I don't want to change any data but just want to replace the corresponding SVG element. One of my approaches looked like this: node.on("click", function() { this.remove(); svg.selectAll(".node").data(graph.nodes).enter().append("rect") .attr("class", "node") .attr("width", 5).attr("height", 5) .style("fill", function(d) { return color(d.group); }); }); So I removed the

问题 I've been tinkering with a force layout that will be used for a tag cloud and each tag is represented by a <circle> whose radius is proportional to the questions with that tag. My question is to determine how to make more popular tags trend toward the center of the cluster and less popular tags congregate around the edges of the tag cloud. So far my code looks like this: function(err, results) { var nodes = results.tags; var width = 1020; var height = 800; var extent = d3.extent(nodes,

问题 Closed. This question is off-topic. It is not currently accepting answers. Want to improve this question? Update the question so it's on-topic for Stack Overflow. Closed 6 years ago . I'd like to have a dynamic bezier curve for the line in a force layout like this cytoscape example, is possible in d3? see this d3 example but use arc. I have no idea of the algorithm, someone has an idea? 回答1: i've see the cytoscape library and with this algorytm works function tick() { path.attr("d", function

问题 I love the new fisheye plug in (http://bost.ocks.org/mike/fisheye/) but want to get it working on a force graph that uses paths and markers rather than lines. I am new to D3 and so far combining the markers demo, with the fisheye demo has defeated me, I wondered if anyone had been successful and could point me in the right direction. Cheers Ben 回答1: vis.on("mousemove", function() { if (rmbMenuHidden) { fisheye.center(d3.mouse(this)); node .each(function(d) { d.display = fisheye(d); }) .attr(

问题 I have created 3 groups of circles each in different force layout: (function () { /****** Functions ******* ************************/ var rand = function (min, max) { return Math.floor(Math.random() * (max - min + 1)) + min; }; /****** Variables ******* ************************/ var i, color, width = 400, height = 400, forces = [], coords, _linksData, _nodesData, mainContainer; /** Coordinates of groups **/ coords = [ [0, 0], [width, 0], [width * 2, 0], ]; color = d3.scale.category10(); /****

问题 Following this example, why isn't drag event triggering on the polygons in the following code? var data = [ { "index" : 0, "vx" : 0, "vy" : 0, "x" : 842, "y" : 106 }, { "index" : 1, "vx" : 0, "vy" : 0, "x" : 839, "y" : 56 }, { "index" : 2, "vx" : 0, "vy" : 0, "x" : 771, "y" : 72 } ] var svg = d3.select("svg"), width = +svg.attr("width"), height = +svg.attr("height"); var simulation = d3.forceSimulation(data) .force("charge", d3.forceManyBody()) .force("center", d3.forceCenter(width / 2,

问题 I am trying to scale nodes (circle tags) in D3 force layout with CSS, like this circle:hover { -webkit-transform: scale(1.5, 1.5); } The node is scaled, but it also moves away from upper left corner the same amount, like the whole layer was scaled. Nothing else (except the node) is scaled however. I have no example to show at the moment. I would be glad for suggestions about what is going on there. I got the idea from the answer by Jonathan Sewell here: Style SVG circle with CSS UPDATE: I

问题 Based on this work: http://bl.ocks.org/mbostock/7882658 If I substitute the automatic nodes creation by a JSON.stringify() output of the automatically generated data like this... var nodes = [ {"cluster":2,"radius":1.6180680659922448}, {"cluster":0,"radius":3.3575295077569}, {"cluster":1,"radius":0.9569281165554346}, {"cluster":3,"radius":10.7245554165012} ]; ...I get an exception "cannot read property x of undefined" on the line: var x = d.x - cluster.x, This is inside the cluster(alpha)

问题 I am in the situation to create a force-directed graph with couple of thousands nodes. As you may guess, the interactive simulation is slow, and the browser will be frozen,as also mentioned in other posts. However, static force-directed graph is not enough for me, and I still need to manipulate the graph with force between nodes to have nice layout. I don't care much about smoothness of simulation. My goal is: 1. the browser will not be frozen; 2. I can drag a node from one place to another