如何更改壓縮圓d3中圓的對齊方式

Question

我正在嘗試更改圓圈的對齊方式，以便我可以看到中間的文本，就像在這張圖片中一樣。

我需要有關如何將所有圓與外圓的圓周對齊的幫助。 我試圖添加文本，但它與中心的圓圈重疊。 是否可以更改圓的對齊方式？

我的代碼在下面提到。

 var root = { "name": "flare", "threat_level": "High", "size": 15000, "children": [{ "name": "Ghost", "threat_level": "High", "size": 1200 }, { "name": "Wiper", "threat_level": "Medium", "size": 1330 }, { "name": "PowerLiks", "threat_level": "Medium", "size": 1333 }, { "name": "Fareit", "threat_level": "Medium", "size": 1300 }, { "name": "Tribe", "threat_level": "High", "size": 1330 }, { "name": "Oilrig", "threat_level": "High", "size": 1330 } ] } var svg = d3.select("svg"), margin = 20, diameter = +svg.attr("width"), g = svg.append("g").attr("transform", "translate(" + diameter / 2 + "," + diameter / 2 + ")"); const color = (type) => type == 'High' ? '#F72047' : (type == 'Medium' ? '#FFFFFF' : '#fff0') //colorScale var defs = svg.append("defs"); var levels = ['High', 'Medium', 'Low'] levels.forEach((d) => { //Create a radial Sun-like gradient defs.append("radialGradient") .attr("id", "sun-gradient_" + d) .selectAll("stop") .data([{ offset: "0%", color: "#1A1D27" }, { offset: "80%", color: "#1A1D27" }, { offset: "100%", color: d == 'High' ? "#CB1F40" : "#959595" } ]) .enter().append("stop") .attr("offset", function (d) { return d.offset; }) .attr("stop-color", function (d) { return d.color; }); // .interpolate(d3.interpolateHcl); }) var pack = d3.pack() .size([diameter - margin, diameter - margin]) .padding(50); root = d3.hierarchy(root) .sum(function (d) { return d.size; }) .sort(function (a, b) { return b.value - a.value; }); var focus = root, nodes = pack(root).descendants(), view; var circle = g.selectAll("circle") .data(nodes) .enter().append("circle") .attr("class", function (d) { return d.parent ? d.children ? "node" : "node node--leaf" : "node node--root"; }) .style("fill", (d) => `url(#${'sun-gradient_' + d.data.threat_level})`) .style('stroke', (d) => color(d.data.threat_level)) .style('stroke-width', 1) .on("click", function (e, d) { if (focus !== d) zoom(d); e.stopPropagation(); }); var text = g.selectAll("text") .data(nodes) .enter().append("text") .attr("class", "label") .text(function (d) { return d.parent === root ? d.data.name : d.data.size; }) .style('font-family', 'Metropolis Bold') .style('font-size', (d) => d.parent === root ? '12px' : '24px') .style('text-anchor', 'middle') .style('fill', (d) => d.parent === root ? '#FFFFFF' : '#F72047') .style('text-transform', 'uppercase') var node = g.selectAll("circle,text"); svg .style("background", color(-1)) .on("click", function () { zoom(root); }); zoomTo([root.x, root.y, root.r * 2 + margin]); function zoom(d) { var focus0 = focus; focus = d; var transition = d3.transition() .duration(750) .tween("zoom", function (d) { var i = d3.interpolateZoom(view, [focus.x, focus.y, focus.r * 2 + margin]); return function (t) { zoomTo(i(t)); }; }); transition.selectAll("text") .filter(function (d) { return d.parent === focus || this.style.display === "inline"; }) .style("fill-opacity", function (d) { return d.parent === focus ? 1 : 0; }) .on("start", function (d) { if (d.parent === focus) this.style.display = "inline"; }) .on("end", function (d) { if (d.parent !== focus) this.style.display = "none"; }); } function zoomTo(v) { var k = diameter / v[2]; view = v; node.attr("transform", function (d) { return "translate(" + (dx - v[0]) * k + "," + (dy - v[1]) * k + ")"; }); circle.attr("r", function (d) { return dr * k; }); }

 <svg width="600" height="600"></svg> <script src="https://d3js.org/d3.v4.min.js"></script>

Answer 1

打包的圓形布局旨在獲取一組對象並將它們盡可能緊密地打包在一個圓圈內。 所以這不是你想要的。

方法一：徑向樹布局

如果你想在給定半徑的圓周上均勻地排列一組對象，你需要類似於“徑向樹布局”的東西。 您可以在您鏈接到的書的第 6 章中看到一個示例（樹、簇和徑向布局），盡管您不希望節點之間有線條。

這個問題的答案中還給出了一個例子： d3.js - 如何正確地在 `circle` 周圍安排 `squre` 框

方法二：使用sin和cos

或者，您可以將圓的周長除以要放置的對象數，然后使用sin和cos手動計算它們的中心點 x 和 y。

這里有一個例子： d3.js 在對象周圍徑向定位元素

這里有一個變體： https ://spin.atomicobject.com/2015/06/12/objects-around-svg-circle-d3-js/