2

How to utilize D3 circle pack layout to get diagram similar to this:

enter image description here

(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:

enter image description here

But I was hoping I would preserve parent-children visual connection.

In the second attempt, I got what I want (jsfiddle):

enter image description here

The key was to change cy of the ellipses the same way as ry.

VividD
  • 10,456
  • 6
  • 64
  • 111

1 Answers1

3

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
Mariatta
  • 698
  • 3
  • 15