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

d3.js - show hierarchy in pie by csv

本文关键字：层次结构 显示 js- 通过 csv d3      更新时间：2023-10-28

我是d3.js的新手，但我已经做了一些练习。我有一个饼图，根据这个csv文件（图2）分为19块（图1）。每件作品都意味着一年，而这件作品的面积意味着它的分数。图片1&2

现在我想在csv中建立一种亲子关系，如图3（每年将包含5大洲）。图3五大洲的分数之和等于当年的分数。

我想把馅饼改一下，这样所有的馅饼都从内侧到外侧切成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); });

您需要对数据进行预处理，为其提供所需的结构。

为此，您可以定义一个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生成器函数。

祝你好运！

相关文章：