d3.js - csvで円グラフで表示

Question

私はd3.jsの新人ですが、私はすでにいくつかの練習をしています。 私は、このcsvファイル（picture2）に基づいて19枚（picture1）に分割された円グラフを持っています。各ピースは1年を意味し、そのピースの面積はそのスコアを意味します。 Picture 1&2

今、私はcsvで親子関係を構築したい、絵3のように（毎年5つの大陸を含む）。 Picture3 5大陸のスコアの合計は、その年のスコアと同じです。

そして、私はすべての部分が内側から外側に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

データを前処理して、必要な構造にする必要があります。

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ロードコールバックで、あなたが行うことができます：

は、このためにはdataPreparation機能を定義することができます

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

をそして、あなたのhierarchicalDataにごpieジェネレータ機能を提供します。

幸運を祈る！