d3-force-directed

问题 I made a D3 forced-directed graph by d3.forceSimulation() and attached the drag function. While clicking one node, I don't want other nodes to move accordingly. Now I can freeze the node being dragged by setting the d.fx and d.fy as the following: function dragended(d) { if (!d3.event.active) simulation.alphaTarget(0); d.fx = d.x; d.fy = d.y; } Is it possible to freeze all the other nodes while dragging one node? 回答1: Thanks @rioV8 for the hint! I tried to fix the other nodes while dragging

问题 I want to update d3-force elements when click, but I find something wrong. What I want is: generate all links first then generate all nodes, so that the node can override the link So when clicked the elements should be: <svg> <line ...></line> <line ...></line> <line ...></line> <line ...></line> <g><circle ...></circle></g> <g><circle ...></circle></g> <g><circle ...></circle></g> <g><circle ...></circle></g> <g><circle ...></circle></g> </svg> But I get: <svg> <g><circle ...></circle></g>

问题 I have a large number of nodes to display on the page, most of the times the circles goes off the visible area of the screen due to node placements. Is there a way to set the initial zoom level based on the whole boundary box of nodes dynamically so that all the nodes fits on the visible area of the screen? Updated: I have added a fiddle for this https://jsfiddle.net/navinleon/6ygaxoyq/3/ var svg = d3.select("svg"), width = +svg.attr("width"), height = +svg.attr("height"); var zoom = d3.zoom(

问题 I have a large number of nodes to display on the page, most of the times the circles goes off the visible area of the screen due to node placements. Is there a way to set the initial zoom level based on the whole boundary box of nodes dynamically so that all the nodes fits on the visible area of the screen? Updated: I have added a fiddle for this https://jsfiddle.net/navinleon/6ygaxoyq/3/ var svg = d3.select("svg"), width = +svg.attr("width"), height = +svg.attr("height"); var zoom = d3.zoom(

来源： https://stackoverflow.com/questions/64526604/d3-force-not-applying-x-scale-properly

来源： https://stackoverflow.com/questions/64526604/d3-force-not-applying-x-scale-properly

问题 I have the following code and I would like to add text in the circles. How could I make it possible; I have looked at these possible duplicates Insert text inside Circle in D3 chart const link = svg.append("g") .attr("stroke", "#999") .attr("stroke-opacity", 0.6) .selectAll("line") .data(links) .enter().append("line") .attr("stroke-width", d => Math.sqrt(d.value)); // link.append("title").text(d => d.value); const node = svg.append("g") .attr("stroke", "#fff") .attr("stroke-width", 1.5)

问题 This question already has answers here : variable declaration conditional syntax (3 answers) Closed 2 years ago . I'm relatively new to JavaScript and d3, but I'm really interested in force-directed layouts. In Mike Bostock's force-directed visualizations, he tends to parse nodes from a list of links using the following code (or similar): var links = [ {source: "A", target: "B"}, {source: "B", target: "C"}, {source: "C", target: "A"}]; var nodes = {}; links.forEach(function(link) { link

问题 This question is a follow-up on a previous one titled "D3-Force updating parameters after initializing graph" (D3-Force updating parameters after initializing graph) and that @altocumulus answered. I am trying to update the simulation forces after modifying the radius of some nodes. However, when I call on forceCollide to account for the changes it does not work. The graph first initiates correctly, using forceCollide and a function to have the force correspond with the radius: var

问题 I'm making an interactive bubble chart and I'm working on functionality to split the data into two groups which move to opposite sides of the screen. I'm using a centering force for my simulation because I think it gives a much nicer and more consistent display of the data than using forceX and forceY does. However, I'm having trouble with the splitting of my data. I had the idea that, since you can pass an anonymous function as a parameter to forceX to determine whether a node moves left or