时间戳

首页 > 解决方案 > 关于如何从我在 d3 中的数据生成饼图的困惑

d3.js - 关于如何从我在 d3 中的数据生成饼图的困惑

问题描述

嗨，我一直在查看 d3 中的饼图生成，我发现大部分数据集都类似于

数据=[{等级：“A”，编号：20}，{等级：“B”，编号：12}，{等级：“C”，编号：15}]；

但我有这样的数据：

数据=[域1：0，域2：1，域3：0，域4：1，域5：0，域6：1]；

我想将其表示为饼图，其中 50% 被 domain2 占用，另外 50% 被 domain4 占用，即。对于域中的每个人 1 个条目，我希望它成为饼图的一部分。

但我不确定如何在这种情况下使用 d3 的 Pie 函数，所以有什么建议吗？非常感谢你的帮助。

标签： d3.jsdata-visualization

解决方案

您只需要将数据转换为适当的格式以d3.pie供使用。您的数据已经是某种对象类型格式：

var input = { domain1: 10, domain2: 3, domain3: 6, domain4: 8, domain5: 12, domain6: 13 };

要将它与 d3.pie 一起使用，您需要一个数组或对象数组。在这种情况下，对象数组可能是最简单的：

var data = Object.keys(input).map( function(d) { return {name: d, value: input[d]}; } );

这会将您的原始输入转换为表单的数组

[{ name: 'domain1', value: 10 }, { name: 'domain2', value: 3 }, ...

d3.pie的文档包含有关配置选项的完整详细信息，但对于基本图表，只需设置访问器，以便 d3.pie 知道从哪里获取每个饼图的值：

var pie = d3.pie()
            .value(function(d) { return d.value; });

然后你需要打电话

pie(data)

生成适当的饼图布局。

这是一个示例，其中插入了一些标准饼图代码的数据版本稍微有趣一些：

var svg = d3.select("svg"),
    width = +svg.attr("width"),
    height = +svg.attr("height"),
    radius = Math.min(width, height) / 2,
    g = svg.append("g").attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");

var color = d3.scaleOrdinal(["#98abc5", "#8a89a6", "#7b6888", "#6b486b", "#a05d56", "#d0743c"]);

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

var path = d3.arc()
    .outerRadius(radius - 10)
    .innerRadius(0);

var label = d3.arc()
    .outerRadius(radius - 40)
    .innerRadius(radius - 40);

var input = { domain1: 10, domain2: 3, domain3: 6, domain4: 8, domain5: 12, domain6: 13 };

var data = Object.keys(input).map( function(d) { return {name: d, value: input[d]}; } );

  var arc = g.selectAll(".arc")
    .data( pie(data))
    .enter().append("g")
      .attr("class", "arc");

  arc.append("path")
      .attr("d", path)
      .attr("fill", function(d) { return color(d.data.name); });

  arc.append("text")
      .attr("transform", function(d) { return "translate(" + label.centroid(d) + ")"; })
      .attr("dy", "0.35em")
      .text(function(d) { return d.data.name; });
.arc text {
  font: 10px sans-serif;
  text-anchor: middle;
}

.arc path {
  stroke: #fff;
}
<svg width="960" height="500"></svg>
<script src="https://d3js.org/d3.v5.min.js"></script>

推荐阅读