Question

我是d3.js的新手，但我已经做了一些练习。我有一个饼图，基于这个csv文件（picture2）分为19个（picture1）。每一件都意味着一年，该件的面积意味着它的分数。 Picture 1&2

现在我想在csv中建立一个父子关系，如图3（每年将包含5个大陆）。 Picture3五大洲的总和＆＃39;分数等于那一年的分数。

我希望改变馅饼，使所有碎片从内侧到外侧切成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生成器功能。

祝你好运！

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

1 个答案: