D3 - 如何将圆包转换为椭圆包？

如何利用D3圆形包布局以获得与此类似的图表：

（即使有更细长的椭圆）？

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

This is jsfiddle http://jsfiddle.net/VividD/WDCpq/8/这演示了我为其他目的制作的圆形包，但我想对于任何想要实验和测试涉及椭圆的潜在解决方案的人来说，这可能是有用的起点。

根据@Mariatta 的回答，我得到了这个jsfiddle http://jsfiddle.net/Upt3h/1/:

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

在第二次尝试中，我得到了我想要的（jsfiddle http://jsfiddle.net/Upt3h/2/):

关键是要改变cy椭圆的方式与ry.

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

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, and ry相对于cx, cy, and r for <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