D3 - How to convert circle-pack to ellipse-pack?
VividD
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.
Mariatta
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
Collected from the Internet
Please contact [email protected] to delete if infringement.
edited at
- Prev: Relative paths to js files in a parent's sibling folder not reachable through express?
- Next: convert ini read value(string) to int
Related
Related Related
- 1
How to center root node circle in a d3.layout.pack graph?
- 2
How to Hide Overlapping Text of Labels in D3 Zoomable Pack Layout?
- 3
Realtime D3 bubble chart (circle pack)
- 4
Tooltips for nested circles in D3 circle pack layout
- 5
Different colors for each circle - D3 circle pack
- 6
Controlling order of circles in D3 circle pack layout algorithm
- 7
Generating visually pleasing circle pack
- 8
Text along circles in a D3 circle pack layout
- 9
how to update data form file json using d3.js (zoomable circle pack)
- 10
Keeping aspect ratio of D3 circle pack - responsive design
- 11
D3 bubble chart / pack layout - How to make bubbles radiate out from the largest bubbles to the smallest?
- 12
Adding hyeperlinks to zoomable d3 circle pack
- 13
stop d3 circle pack labels from overlapping
- 14
'd3-circle-text' on zoomable circle-pack
- 15
D3 update circle-pack data new nodes overlap existing nodes
- 16
Add circle to pack layout
- 17
D3 Circle Pack Layout with a horizontal arrangement
- 18
pack in small circles into a bigger circle
- 19
How to convert a struct into a template parameter pack?
- 20
How to center root node circle in a d3.layout.pack graph?
- 21
How to Hide Overlapping Text of Labels in D3 Zoomable Pack Layout?
- 22
Controlling order of circles in D3 circle pack layout algorithm
- 23
Keeping aspect ratio of D3 circle pack - responsive design
- 24
Undefined function when loading D3 circle pack
- 25
D3 bubble chart / pack layout - How to make bubbles radiate out from the largest bubbles to the smallest?
- 26
is it possible to tweak the d3 bubble chart to obtain the bubbles at scattered positions instead of a circle pack?
- 27
D3 add zoom to circle pack
- 28
Circle Pack Layout D3 - remove add nodes on new data
- 29
how to use circle pack layout in ggraph library in r
Comments