在d3饼图中对数据进行分组

Question

Im creating a small d3 ( http://d3js.org/ ) pie chart where some pieces of the pie are separated and translated away from the center of the pie on hover. 我创建了一个小的d3（ http://d3js.org/ ）饼图，其中一些饼图被分离并悬停时从饼图的中心移开。 So far i managed separating the different parts of the pie and translating them away from the center of the circle, but they are translated separatedly. 到目前为止，我设法将饼图的不同部分分开，并将它们平移到圆心之外，但它们是分开平移的。 My goal is to group the pieces and translate them away together. 我的目标是将作品分组并一起翻译。 Im very new to d3js. 我对d3js非常陌生。

Basically what I want to achieve is grouping some of the elements and translating them away from the center of origin grouped. 基本上，我要实现的是对一些元素进行分组，并将其从分组的原点中心移开。 Right now the pieces are translated separately and Im guessing that I can fix the problem by adding a parent and translating that parent away from the center. 现在，这些片段是分别翻译的，我想我可以通过添加一个父对象并从中心移开该父对象来解决此问题。

So basically my question is : 所以基本上我的问题是：

How can i group pieces of data (fx the ones labeled food) and translate that group away from the center of origin? 我如何对数据进行分组（与标有食物的数据相对应）并将其转换为远离原点中心？

The project can be found below and the content of the csv file in the bottom. 可以在下面找到该项目，在底部找到csv文件的内容。 Copy paste the code into a html-document and copy paste the csv data into a file named 'data.csv' located in the same folder. 复制将代码粘贴到html文档中，然后将csv数据复制粘贴到位于同一文件夹中的名为“ data.csv”的文件中。

Thanks 谢谢

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

//content of csv file : // 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

I can think of two ways to do this. 我可以想到两种方法来做到这一点。

1) Create an outer pie chart with a single pie segment for each class, then create addition pie charts inside each outer pie segment. 1）为每个类创建一个具有单个饼图段的外部饼图，然后在每个外部饼图段中创建其他饼图。 The inner pie charts need to specify a start/end angle for their piechart (which matches the outer pie segment for that class). 内部饼图需要为其饼图指定一个开始/结束角度（与该类的外部饼图段匹配）。 Here's a example on Plunker: http://plnkr.co/edit/cblP4d?p=preview 这是有关Plunker的示例： http ://plnkr.co/edit/cblP4d?p=preview

2) Instead of translating each datapoint individually, create an array of translations for each class. 2）与其单独翻译每个数据点，不如为每个类创建一个翻译数组。 Each class's translation uses the centroid for that class. 每个班级的翻译都使用该班级的质心。 When you translate each arc, use the translation array (referenced by class). 平移每个弧时，请使用平移数组（按类引用）。

在d3饼图中对数据进行分组

问题描述

1 个解决方案

解决方案1
0 2014-06-22 20:28:42

在d3饼图中对数据进行分组

问题描述

1 个解决方案

解决方案1 0 2014-06-22 20:28:42

解决方案1
0 2014-06-22 20:28:42