D3 多个饼图标签答案

【问题标题】：D3 multiple pie chart labelsD3 多个饼图标签
【发布时间】：2014-08-17 21:02:31
【问题描述】：

我对使用非常大的数据集并尝试创建非常大的饼图数组的 D3 比较陌生。但是我不知道如何在每个饼图的最顶部放置标题。

我正在使用的数据目前是这样的 csv 格式，而结果将是我想要的饼图标签

[apple,90,36,2]
[pear,36,36,3]
[grape,19,13,0]

我已将我的代码粘贴在下面，其中包含适用于它的数据。此外，我最终希望能够放大数据并从这样的缩小功能中查看它：

http://mbostock.github.io/d3/talk/20111116/pack-hierarchy.html

如果有人有想法有效地传达这一点，我们将不胜感激。

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
    <title>Multiple Pie Charts</title>
    <script type="text/javascript" src="http://mbostock.github.com/d3/d3.js?2.4.5"></script>
    <script type="text/javascript" src="http://mbostock.github.com/d3/d3.layout.js?2.4.5"></script>
    <style type="text/css">


body {
  text-align: center;
}

    </style>
  </head>
  <body>
    <script type="text/javascript">
var data = [
[90,36,2],
[36,36,3],
[19,13,0],
]
var m = 10,
    r = 100,
    z = d3.scale.category20c();
var svg = d3.select("body").selectAll("svg")
    .data(data)
  .enter().append("svg:svg")
    .attr("width", (r + m) * 2)
    .attr("height", (r + m) * 2)
  .append("svg:g")
    .attr("transform", "translate(" + (r + m) + "," + (r + m) + ")");
svg.selectAll("path")
    .data(d3.layout.pie())
  .enter().append("svg:path")
    .attr("d", d3.svg.arc()
    .innerRadius(r / 2)
    .outerRadius(r))
    .style("fill", function(d, i) { return z(i); });

    </script>
  </body>
</html>

【问题讨论】：

标签： javascript d3.js zooming pie-chart circle-pack

【解决方案1】：

您可以使用 dc.js，它简化了 d3 图表的制作并保留了灵活性。在该项目的主页上，他们有一个指向带注释源的链接，因此您可以了解如何使用它。

如果您有一个大型数据集，我会使用类似的东西，因为它使用交叉过滤器将您的数据元素减少到仅需要显示的那些，从而获得更好的性能。

抱歉，我没有直接回答您的标题问题，而是提出了一种不同的方法，但我从来没有这样做过，因为我使用了 dc.js，这让这一切变得更加简单。

【讨论】：

很酷的想法并不是我真正想要的。不过感谢您的意见！

【解决方案2】：

想通了

<!DOCTYPE html>
<meta charset="utf-8">
<style>

body {
  font: 10px sans-serif;
}

svg {
  padding: 10px 0 0 10px;
}

.arc {
  stroke: #fff;
}

</style>
<body>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script>

var radius = 74,
    padding = 10;

var color = d3.scale.ordinal()
    .range(["#98abc5", "#8a89a6", "#7b6888", "#6b486b", "#a05d56", "#d0743c", "#2B8429"]);

var arc = d3.svg.arc()
    .outerRadius(radius)
    .innerRadius(radius - 30);

var pie = d3.layout.pie()
    .sort(null)
    .value(function(d) { return d.population; });

d3.csv("data1.csv", function(error, data) {
  color.domain(d3.keys(data[0]).filter(function(key) { return key !== "fruit"; }));

  data.forEach(function(d) {
    d.ages = color.domain().map(function(name) {
      return {name: name, population: +d[name]};
    });
  });

  var legend = d3.select("body").append("svg")
      .attr("class", "legend")
      .attr("width", radius * 2)
      .attr("height", radius * 2)
    .selectAll("g")
      .data(color.domain().slice().reverse())
    .enter().append("g")
      .attr("transform", function(d, i) { return "translate(0," + i * 20 + ")"; });

  legend.append("rect")
      .attr("width", 18)
      .attr("height", 18)
      .style("fill", color);

  legend.append("text")
      .attr("x", 24)
      .attr("y", 9)
      .attr("dy", ".35em")
      .text(function(d) { return d; });

  var svg = d3.select("body").selectAll(".pie")
      .data(data)
    .enter().append("svg")
      .attr("class", "pie")
      .attr("width", radius * 2)
      .attr("height", radius * 2)
    .append("g")
      .attr("transform", "translate(" + radius + "," + radius + ")");

  svg.selectAll(".arc")
      .data(function(d) { return pie(d.ages); })
    .enter().append("path")
      .attr("class", "arc")
      .attr("d", arc)
      .style("fill", function(d) { return color(d.data.name); });

  svg.append("text")
      .attr("dy", ".35em")
      .style("text-anchor", "middle")
      .text(function(d) { return d.fruit; });

});

</script>

【讨论】：