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>