D3 - 如何将circle-pack转换为ellipse-pack？ [英] D3 - How to convert circle-pack to ellipse-pack?

问题描述

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

（即使有更长的椭圆）？

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

这是）：

关键是更改 cy 的省略号与 ry 相同。

解决方案

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

  var circles = vis.append（circle）
 .attr（stroke ，黑色）
 .style（填充，函数（d）{return！d.children？tan：beige;}）
 .attr（cx，function （d）{return dx;}）
 .attr（cy，function（d）{return dy;}）
 .attr（r，function（d）{return dr;} ）; 
  

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

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

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

  var ellipses = vis .append（ellipse）
 .attr（stroke，black）
 .style（fill，function（d）{return！d.children？tan：beige ;}）
 .attr（cx，function（d）{return dx;}）
 .attr（cy，function（d）{return dy;}）
 .attr（rx，10）//为x radius定义你自己的规则
 .attr（ry，5）; //为y radius定义自己的规则
  

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.

解决方案

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

这篇关于D3 - 如何将circle-pack转换为ellipse-pack？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！