Question

对于使用非常大的数据集并尝试创建非常大的饼图数组的D3来说，我相对较新。但是我无法弄清楚如何在每个饼图的最顶部放置标题。

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

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

我已将下面的代码粘贴到下面包含的数据中。此外，我最终希望能够放大数据并从缩小的功能中查看它，如下所示：

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

enter image description here

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

<!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>

Answer 1

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

如果您有大型数据集，我会使用类似的东西，因为它使用crossfilter将数据元素减少到只需要显示的数据元素，从而产生更好的性能。

抱歉，我没有直接回答你的标题问题，但建议采用不同的方式，但我从来没有这样做，因为我使用dc.js，这使得这一切变得更加简单。

Answer 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>

D3多个饼图标签

2 个答案: