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

Question

如何利用D3圈组布局获取与此类似的图表：

（即使有更长的椭圆）？

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

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

---

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

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

---

在第二次尝试中，我得到了我想要的东西（jsfiddle）：

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

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; });

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

要将其转换为省略号，您需要知道需要设置的属性。可以像这样创建一个svg ellipse元素： <ellipse cx="200" cy="80" rx="100" ry="50"> 请注意您需要如何设置cx，cy，rx和ry，而不是cx，cy和{{1} } {} {}} {/ p>

根据这些知识，您现在应该可以将圆圈转换为椭圆形，如下所示：

r