问题
How to utilize D3 circle pack layout to get diagram similar to this:
(even with more elongated ellipses)?
The key aplication of this diagram style would be easier label placement.
This is jsfiddle that demonstrates circle pack, that I made for other purposes, but I guess it might be useful starting point for anyone wanting to experiment and test potential solution involving ellipses.
Based on @Mariatta 's answer, I got this jsfiddle:
But I was hoping I would preserve parent-children visual connection.
In the second attempt, I got what I want (jsfiddle):
The key was to change cy of the ellipses the same way as ry.
回答1:
Well the part you need to pay attention to is :
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; });
What happens here is you are creating an svg circle element with attributes of cx, cy, and r, similar to <circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" />
To convert this to ellipsis, you need to know what are the attributes you need to set. An svg ellipse element can be created like so:
<ellipse cx="200" cy="80" rx="100" ry="50">
Note how you need to set the cx, cy, rx, and ry as opposed to cx, cy, and r for <circle>
Based on this knowledge you should be now able to convert your circle to ellipse like this :
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
来源：https://stackoverflow.com/questions/24665032/d3-how-to-convert-circle-pack-to-ellipse-pack