Question

我正在创建一个小的d3（http://d3js.org/）饼图，其中某些饼图是分开的并在悬停时从馅饼的中心翻译出来。到目前为止，我设法分离饼图的不同部分并将它们从圆心转移，但它们是分开翻译的。我的目标是将各个部分分组并将它们一起翻译。我是d3js的新手。

基本上我想要实现的是将一些元素分组并将它们从原始中心转换为分组。现在这些作品是单独翻译的，我猜我可以通过添加父母并将父母从中心翻译来解决问题。

基本上我的问题是：

如何将数据分组（标记为食物的数据）并将该组转换为远离原始中心的数据？

可以在下面找到项目，并在底部找到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）不是单独翻译每个数据点，而是为每个类创建一个翻译数组。每个类的翻译都使用该类的质心。翻译每个弧时，请使用转换数组（由类引用）。

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

1 个答案: