在 d3 饼图中分组数据

Question

我正在创建一个小的 d3 (http://d3js.org/) 饼图，其中一些饼图是分开的 并在悬停时远离馅饼的中心。 到目前为止，我设法将馅饼的不同部分分开并将它们从圆心平移，但它们是分开翻译的。我的目标是将这些片段分组并将它们一起翻译。 我对 d3js 很陌生。

基本上我想要实现的是对一些元素进行分组并将它们从分组的原点中心转移。 现在这些部分是单独翻译的，我猜我可以通过添加一个父级并将该父级从中心翻译出来来解决问题。

所以基本上我的问题是：

我如何对数据片段进行分组（fx 标记为食物的数据）并将该组转换为远离原点的中心？

项目可以在下面找到，csv文件的内容在底部。将代码复制粘贴到 html 文档中，然后将 csv 数据复制粘贴到位于同一文件夹中的名为“data.csv”的文件中。

谢谢

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

body {
    font: 10px sans-serif;
}

.arc path {
    stroke: #fff;
}

</style>
<body>
<!--https://github.com/mhemesath/r2d3/-->
<!--[if lte IE 8]><script src="r2d3.min.js"></script><![endif]-->
<!--[if gte IE 9]><!-->
<script src="http://d3js.org/d3.v3.min.js"></script>
<!--<![endif]-->

<script>

// dimension
var width = 960,
        height = 500,
        radius = Math.min(width, height) / 2;

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

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

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

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


d3.csv("data.csv", function(error, data) {

    var g = svg.selectAll(".arcs")
            .data(pie(data))
            .enter().append("g")
            .attr("class", function (d, i) {
                return data[i].class;  // i is 0-based.
            });

//        Select all classes named 'pizza' and translate away from center of circle
    svg.selectAll('.food')
            .attr("transform", function(d) {    //set the origin to the center of the arc
            //we have to make sure to set these before calling arc.centroid
            d.innerRadius = 0;
            d.outerRadius = 0;
            x = arc.centroid(d)[0];
            y = arc.centroid(d)[1];
            return "translate(" + x/4 +','+ y/4 + ")";        //this gives us a pair of coordinates like [50, 50]
         });


    // color fill
    g.append("path")
            .attr("d", arc)
            .style("fill", function(d) { return color(d.data.age); });

    // append text
    g.append("text")
            .attr("transform", function(d) { return "translate(" + arc.centroid(d) + ")";     })
            .attr("dy", ".35em")
            .style("text-anchor", "middle")
            .text(function(d) { return d.data.age; });
});
</script>

//csv文件内容：

age,population,class
<5,2704659,food
5-13,4499890,food
14-17,2159981,food
18-24,3853788,icecream
25-44,14106543,icecream
45-64,8819342,pizza
≥65,612463,pizza

Answer 1

我可以想到两种方法来做到这一点。

1) 为每个类创建一个带有单个饼段的外部饼图，然后在每个外部饼段内创建附加饼图。内部饼图需要为其饼图指定开始/结束角度（与该类的外部饼段匹配）。这是 Plunker 上的一个示例：http://plnkr.co/edit/cblP4d?p=preview

2) 不是单独翻译每个数据点，而是为每个类创建一个翻译数组。每个类的翻译都使用该类的质心。平移每条弧线时，请使用平移数组（由类引用）。