javascript - d3.js - 通过 csv 在饼图中显示层次结构

Question

我是 d3.js 的新手，但我已经做了一些实践。 我有一个饼图，它根据这个 csv 文件(图 2)分为 19 个部分(图 1)。每一 block 代表一年，该 block 的面积代表它的分数。 Picture 1&2

现在我想在csv中建立一个父子关系，如图3(每年将包含5个大陆)。 Picture3五大洲得分之和等于当年得分。

我希望改变馅饼，以便所有部分都从内侧到外侧切成 5 层。

我当前的部分代码在这里。谁能告诉我如何制作层次结构？如果图3的结构不对，应该怎样结构呢？

我需要 json 吗？如果是这样，如何将csv文件的数据加载部分更改为json文件的数据加载部分？

    var width = 650, height = 650, radius = Math.min(width, height) / 2, innerRadius=0;

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

    var arc = d3.svg.arc()
      .innerRadius(innerRadius)
      .outerRadius(function (d) {
        return (radius - innerRadius) * Math.sqrt(d.data.score / 2900.0) + innerRadius;
      });

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

//data loading
    d3.csv('./src/InCountry-v1.csv', function(error, data) {

      data.forEach(function(d) {
        d.id     =  d.year;
        d.order  = +d.order;
        d.color  =  d.color;
        d.weight = +d.weight;
        d.score  = +d.score;
        d.width  = +d.weight;
        d.label  =  d.label;
      });

    var path = svg.selectAll(".solidArc")
           .data(pie(data))
           .enter().append("path")
           .attr("fill", function(d) { return d.data.color})
           .attr("class", "solidArc")
           .attr("stroke", "gray")
           .attr("d", arc)
           .attr("opacity",0.5)
           .on("mouseenter", function() {d3.select(this)
                                           .style("fill", function(d) { return d.data.color})
                                           .attr("opacity",1); })
           .on("mouseleave", function() { d3.select(this).attr("opacity", 0.5); });

Answer 1

您需要预处理数据以赋予其所需的结构。

为此，您可以定义一个 dataPreparation 函数:

function dataPreparation ( data ) {
  var byYear = {};
  var result = [];

  data.forEach(function (d) {
    if ( !byYear.hasOwnProperty(d.year) ) {
      byYear[d.year] = {
        year: d.year, 
        order: +d.order, 
        score: +d.score, 
        weight: +d.weight,
        width: +d.width,
        color: d.color,
        label: d.label,
        entries: [d]
      };
      result.push(byYear[d.year]);
    } else {
      byYear[d.year].score += +d.score;
      byYear[d.year].entries.push(d);
    }
  });
  return result;
}

然后在 csv 加载回调中，您可以执行以下操作:

d3.csv('./src/InCountry-v1.csv', function(error, data) {
  var hierarchicalData = dataPreparation(data);

并将您的 hierarchicalData 提供给您的 pie 生成器函数。

祝你好运!