javascript - D3 - 如何将 circle-pack 转换为 ellipse-pack？

Question

如何利用 D3 圆包布局来得到类似这样的图表:

(即使有更细长的椭圆)？

这种图表样式的关键应用是更容易放置标签。

这是 jsfiddle这演示了我为其他目的制作的圆包，但我想对于任何想要试验和测试涉及椭圆的潜在解决方案的人来说，这可能是有用的起点。

---

根据@Mariatta 的回答，我得到了 this jsfiddle :

但我希望我能保持亲子视觉联系。

---

在第二次尝试中，我得到了我想要的(jsfiddle):

关键是像 ry 一样改变省略号的 cy。

Answer 1

那么你需要注意的部分是:

var circles = vis.append("circle")
    .attr("stroke", "black")
    .style("fill", function(d) { return !d.children ? "tan" : "beige"; })
    .attr("cx", function(d) { return d.x; })
    .attr("cy", function(d) { return d.y; })
    .attr("r", function(d) { return d.r; });

这里发生的是你正在创建一个带有 cx、cy 和 r 属性的 svg 圆形元素，类似于 <circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" />

要将其转换为省略号，您需要知道需要设置哪些属性。可以像这样创建一个 svg 椭圆元素: <ellipse cx="200" cy="80" rx="100" ry="50">请注意您需要如何设置 cx , cy , rx , 和 ry而不是 cx , cy , 和 r对于 <circle>

基于这些知识，您现在应该能够像这样将圆圈转换为椭圆形:

var ellipses = vis.append("ellipse")
    .attr("stroke", "black")
    .style("fill", function(d) { return !d.children ? "tan" : "beige"; })
    .attr("cx", function(d) { return d.x; })
    .attr("cy", function(d) { return d.y; })
    .attr("rx", 10) // define your own rule for x radius
    .attr("ry", 5); // define your own rule for y radius