如何在d3.js中的Pack Layout中插入饼图？ [英] How to insert pie charts in Pack Layout in d3.js?

问题描述

让我们假设这是我的饼图数据和饼图布局

  var data = [2,3,4,5] 
  

var arc = d3.svg.arc（）
.outerRadius（50）
.innerRadius（0） p>

var pie = d3.layout.pie（）
.sort（null）

  .value（function（d）{return d;}）; 
  

这是packlayout绘制圆形的方法 b
$ b

  var circle = svg.selectAll（circle）
 .data（nodes1）
 .enter circle）
 .attr（class，function（d）{return d.parent？d.children？node：node node  -  leaf：node node  - ）
 .style（fill，function（d）{return d.children？color（d.depth）：null;}）
 .on （focus！== d）zoom（d），d3.event.stopPropagation（）;}）; 
  

任何人都可以解释我为什么不是在包布局中添加圈子，而是可以追加路径，图表出来了吗？[enter image description here]

解决方案

可以使用包布局中的 r 值输出来定义 arc c的 outerRadius / code> generator。然后，您可以附加svg g 元素，而不是将svg circle 元素附加到图表中，弧内：

完整示例： http： //bl.ocks.org/jsl6906/4a1b818b64847fb05d56

相关代码：

  var bubble = d3.layout.pack （）
 .value（function（d）{return d3.sum（d [1]）;}）
 .sort（null）
 .size b $ b .padding（1.5），
 arc = d3.svg.arc（）。innerRadius（0），
 pie = d3.layout.pie（）; 
 
 var svg = d3.select（body）。append（svg）
 .attr（width，diameter）
 .attr直径）
 .attr（class，bubble）; 
 
 var nodes = svg.selectAll（g.node）
 .data（bubble.nodes（{children：data}）filter（function（d）{return！d。 children;}））; 
 nodes.enter（）。append（g）
 .attr（class，node）
 .attr（transform，function（d）{returntranslate （+ dx +，+ dy +）;}）; 
 
 var arcGs = nodes.selectAll（g.arc）
 .data（function（d）{
 return pie（d [1]）。map m）{mr = dr; return m;}）; 
}）; 
 var arcEnter = arcGs.enter（）。append（g）。attr（class，arc）; 
 
 arcEnter.append（path）
 .attr（d，function（d）{
 arc.outerRadius（dr）; 
 return arc d）; 
}）
 .style（fill，function（d，i）{return color（i）;}）; 
  

Hello All instead of simple Circles, i want to add pie charts in my Pack layout.

Lets Suppose this is my pie chart data and pie layout

var data=[2,3,4,5]

var arc = d3.svg.arc() .outerRadius(50) .innerRadius(0);

var pie = d3.layout.pie() .sort(null)

.value(function(d) { return d; });

And this is how the packlayout draws the circle

  var circle = svg.selectAll("circle")
  .data(nodes1)
  .enter().append("circle")
  .attr("class", function(d) { return d.parent ? d.children ? "node" : "node node--leaf" : "node node--root"; })
  .style("fill", function(d) { return d.children ? color(d.depth) : null; })
  .on("click", function(d) { if (focus !== d) zoom(d), d3.event.stopPropagation(); }); 

Can anyone please explain me how instead of appending circles in pack layout i could rather append paths and make pie charts out of it?![enter image description here][1]

解决方案

Instead of using the pack layout results directly, you can use the r value output from the pack layout to define the outerRadius of your arc generator. Then, instead of appending svg circle elements to the chart, you can append svg g elements, and append each of the arcs inside that:

Full example: http://bl.ocks.org/jsl6906/4a1b818b64847fb05d56

Relevant code:

var bubble = d3.layout.pack()
      .value(function(d) { return d3.sum(d[1]); })
      .sort(null)
      .size([diameter, diameter])
      .padding(1.5),
    arc = d3.svg.arc().innerRadius(0),
    pie = d3.layout.pie();

var svg = d3.select("body").append("svg")
    .attr("width", diameter)
    .attr("height", diameter)
    .attr("class", "bubble");

var nodes = svg.selectAll("g.node")
    .data(bubble.nodes({children: data}).filter(function(d) { return !d.children; }));
nodes.enter().append("g")
    .attr("class", "node")
    .attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; });

var arcGs = nodes.selectAll("g.arc")
    .data(function(d) {
      return pie(d[1]).map(function(m) { m.r = d.r; return m; });
    });
var arcEnter = arcGs.enter().append("g").attr("class", "arc");

arcEnter.append("path")
    .attr("d", function(d) {
      arc.outerRadius(d.r);
      return arc(d);
    })
    .style("fill", function(d, i) { return color(i); });

这篇关于如何在d3.js中的Pack Layout中插入饼图？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！