d3.js - 通過csv顯示餅圖中的層次結構

Question

我是d3.js的新手，但我已經做了一些練習。 我有一個餅圖，根據這個csv文件（picture2）分成19個部分（picture1）。每件作品意味着一年，該作品的面積意味着它的得分。 Picture 1&2

現在我想在csv中構建一個父子關係，如圖3（每年將包含5個大洲）。 Picture3五大洲的得分總和等於當年的得分。

而且我想改變餡餅，讓所有的部分從內側切到外側5層。

我現在的部分代碼就在這裏。任何人都可以告訴我如何製作層次結構？如果picture3中的結構不正確，結構應該如何？

我需要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發生器功能。

祝你好運！