D3氣泡圖/力布局 forceAttraction

Question

我正在嘗試創建氣泡圖。（我是 D3.js 的新手）。

首先，我嘗試通過參考此站點（ https://www.d3-graph-gallery.com/graph/circularpacking_drag.html ）更改代碼以制作氣泡圖。 以下代碼是原始代碼。

 // set the dimensions and margins of the graph var width = 450 var height = 450 // append the svg object to the body of the page var svg = d3.select("#my_dataviz") .append("svg") .attr("width", 450) .attr("height", 450) // create dummy data -> just one element per circle var data = [{ "name": "A" }, { "name": "B" }, { "name": "C" }, { "name": "D" }, { "name": "E" }, { "name": "F" }, { "name": "G" }, { "name": "H" }] // Initialize the circle: all located at the center of the svg area var node = svg.append("g") .selectAll("circle") .data(data) .enter() .append("circle") .attr("r", 25) .attr("cx", width / 2) .attr("cy", height / 2) .style("fill", "#19d3a2") .style("fill-opacity", 0.3) .attr("stroke", "#b3a2c8") .style("stroke-width", 4) .call(d3.drag() // call specific function when circle is dragged .on("start", dragstarted) .on("drag", dragged) .on("end", dragended)); // Features of the forces applied to the nodes: var simulation = d3.forceSimulation() .force("center", d3.forceCenter().x(width / 2).y(height / 2)) // Attraction to the center of the svg area .force("charge", d3.forceManyBody().strength(1)) // Nodes are attracted one each other of value is > 0 .force("collide", d3.forceCollide().strength(.1).radius(30).iterations(1)) // Force that avoids circle overlapping // Apply these forces to the nodes and update their positions. // Once the force algorithm is happy with positions ('alpha' value is low enough), simulations will stop. simulation .nodes(data) .on("tick", function(d) { node .attr("cx", function(d) { return dx; }) .attr("cy", function(d) { return dy; }) }); // What happens when a circle is dragged? function dragstarted(d) { if (!d3.event.active) simulation.alphaTarget(.03).restart(); d.fx = dx; d.fy = dy; } function dragged(d) { d.fx = d3.event.x; d.fy = d3.event.y; } function dragended(d) { if (!d3.event.active) simulation.alphaTarget(.03); d.fx = null; d.fy = null; }

 <div id="my_dataviz"></div> <script src="https://d3js.org/d3.v5.js"></script>

在這個圖表中，由於沒有吸引功能（吸引到中心），我嘗試添加以下代碼。 （我參考了以下站點https://blockbuilder.org/ericssoco/d2d49d95d2f75552ac64f0125440b35e ）

.force('attract', d3.forceAttract()
.target([width/2, height/2])
.strength(0.01))

但是，它不起作用。它的變化如下圖所示。

誰能建議我為什么會發生這種情況？

Answer 1

您從d3.forceAttract獲得的圖像在 d3 v5 中不存在，正如您從控制台中看到的那樣。 您可以使用d3.forceRadial類的d3.forceRadial ，但是要向中心添加吸引力：

 // set the dimensions and margins of the graph var width = 450 var height = 450 // append the svg object to the body of the page var svg = d3.select("#my_dataviz") .append("svg") .attr("width", 450) .attr("height", 450) // create dummy data -> just one element per circle var data = [{ "name": "A" }, { "name": "B" }, { "name": "C" }, { "name": "D" }, { "name": "E" }, { "name": "F" }, { "name": "G" }, { "name": "H" }] // Initialize the circle: all located at the center of the svg area var node = svg.append("g") .selectAll("circle") .data(data) .enter() .append("circle") .attr("r", 25) .attr("cx", width / 2) .attr("cy", height / 2) .style("fill", "#19d3a2") .style("fill-opacity", 0.3) .attr("stroke", "#b3a2c8") .style("stroke-width", 4) .call(d3.drag() // call specific function when circle is dragged .on("start", dragstarted) .on("drag", dragged) .on("end", dragended)); // Features of the forces applied to the nodes: var simulation = d3.forceSimulation() .force("center", d3.forceCenter().x(width / 2).y(height / 2)) // Attraction to the center of the svg area .force("charge", d3.forceManyBody().strength(1)) // Nodes are attracted one each other of value is > 0 .force("collide", d3.forceCollide().strength(.1).radius(30).iterations(1)) // Force that avoids circle overlapping .force('attract', d3.forceRadial(0, width / 2, height / 2).strength(0.05)) // Apply these forces to the nodes and update their positions. // Once the force algorithm is happy with positions ('alpha' value is low enough), simulations will stop. simulation .nodes(data) .on("tick", function(d) { node .attr("cx", function(d) { return dx; }) .attr("cy", function(d) { return dy; }) }); // What happens when a circle is dragged? function dragstarted(d) { if (!d3.event.active) simulation.alphaTarget(.03).restart(); d.fx = dx; d.fy = dy; } function dragged(d) { d.fx = d3.event.x; d.fy = d3.event.y; } function dragended(d) { if (!d3.event.active) simulation.alphaTarget(.03); d.fx = null; d.fy = null; }

 <div id="my_dataviz"></div> <script src="https://d3js.org/d3.v5.js"></script>