半径变化的d3甜甜圈图 [英] d3 donut charts of varying radius

问题描述

我想重新创建类似于以下示例的内容:

I would like to recreate something similar to the following examples:

http://bl.ocks.org/mbostock/3888852

http://bl.ocks.org/mbostock/1305111

唯一的区别是我想控制每个甜甜圈的半径，而不是让所有甜甜圈都相同.如何动态更改甜甜圈图的半径?

The only difference is that I want to control the radius of each donut, rather than having it be the same for all of them. How do I dynamically vary the radius of the donut charts?

推荐答案

为此，您需要为每个附加的饼图动态调整.innerRadius()和/或.outerRadius()，例如

For this, you need to adjust the .innerRadius() and/or .outerRadius() dynamically for each appended pie chart, for example

svg.selectAll(".arc")
  .data(function(d) { return pie(d.ages); })
.enter().append("path")
  .attr("class", "arc")
  .attr("d", function(d, i) { return arc.innerRadius(radius - 30 * Math.random())(d, i); })
  .style("fill", function(d) { return color(d.data.name); });

完整示例此处.在一个真实的示例中，您想在数据中指定半径并引用该半径，而不是为饼图的每个分段都组成一个随机数.然后，对于同一个饼图中的所有细分，您还可以具有相同的半径.

Complete example here. In a real example, you'd want to specify the radius in the data and reference that instead of making up a random number for each segment of the pie chart. Then you can also have the same radius for all the segments in the same pie chart.

这篇关于半径变化的d3甜甜圈图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！