d3.jsドーナツチャートをjson配列から読み取るように変更する

Question

この例をCSVファイルではなくJSON配列から読み込むにはどうすればよいですか？ CSVではなく「データ」として使用したい静的なJSON文字列を使用します。どんなポインタも非常に高く評価されます。

var width = 960, 
height = 500, 
radius = Math.min(width, height)/2; 

var color = d3.scale.ordinal() 
.range(["#98abc5", "#8a89a6", "#7b6888", "#6b486b", "#a05d56", "#d0743c", "#ff8c00"]); 

var arc = d3.svg.arc() 
.outerRadius(radius - 10) 
.innerRadius(radius - 70); 

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

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

d3.csv("data.csv", type, function(error, data) { 
if (error) throw error; 

var g = svg.selectAll(".arc") 
    .data(pie(data)) 
.enter().append("g") 
    .attr("class", "arc"); 

g.append("path") 
    .attr("d", arc) 
    .style("fill", function(d) { return color(d.data.age); }); 

g.append("text") 
    .attr("transform", function(d) { return "translate(" + arc.centroid(d) + ")"; }) 
    .attr("dy", ".35em") 
    .text(function(d) { return d.data.age; }); 
}); 

function type(d) { 
d.population = +d.population; 
return d; 
} 

サンプルJSONデータ：

[ 
{ 
"age": "<5", 
"population": 2704659 
}, 
{ 
"age": "5-13", 
"population": 4499890 
}, 
{ 
"age": "14-17", 
"population": 2159981 
}, 
{ 
"age": "18-24", 
"population": 3853788 
}, 
{ 
"age": "25-44", 
"population": 14106543 
}, 
{ 
"age": "45-64", 
"population": 8819342 
}, 
{ 
"age": "≥65", 
"population": 612463 
} 
] 

これは、次のリンクの例です。ただ、ここでd3.json

var data; // a global 

d3.json("path/to/file.json", function(error, json) { 
    if (error) return console.warn(error); 
    data = json; 
    visualizeit(); 
}); 

を使用Original Example

Answer 1

本当に多くの変更はありません。あなたが与えた例を使用して、ちょうどvarはdataと呼ばれる定義し、それをあなたのサンプルJSONデータを割り当てる：

var data = [ 
{ 
    "age": "<5", 
    "population": 2704659 
}, 
{ 
    "age": "5-13", 
    "population": 4499890 
}, 
...etc 

続いてブロックまたはd3.csvを削除（）ラインをライン＃53で、すべてがうまく動作します。ここで

はあなたのためのフィドルです：https://jsfiddle.net/ej2s217f/

Answer 2

はd3 requestsの詳細です。

編集

あなたはここで、外部JSONをロードしたくない場合は、あなたがしなければならないが、残るもの、d3.jsonコールをドロップすると、基本的にvar data = [...]

を宣言しているjsfiddle

です次のとおりです。

var width = 960, 
     height = 500, 
     radius = Math.min(width, height)/2; 

    var color = d3.scale.ordinal() 
     .range(["#98abc5", "#8a89a6", "#7b6888", "#6b486b", "#a05d56", "#d0743c", "#ff8c00"]); 

    var arc = d3.svg.arc() 
     .outerRadius(radius - 10) 
     .innerRadius(radius - 70); 

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

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

    data = [ 
     { 
      "age": "<5", 
      "population": 2704659 
     }, 
     { 
      "age": "5-13", 
      "population": 4499890 
     }, 
     { 
      "age": "14-17", 
      "population": 2159981 
     }, 
     { 
      "age": "18-24", 
      "population": 3853788 
     }, 
     { 
      "age": "25-44", 
      "population": 14106543 
     }, 
     { 
      "age": "45-64", 
      "population": 8819342 
     }, 
     { 
      "age": "≥65", 
      "population": 612463 
     } 
    ]; 

    var g = svg.selectAll(".arc") 
     .data(pie(data)) 
     .enter().append("g") 
     .attr("class", "arc"); 

    g.append("path") 
     .attr("d", arc) 
     .style("fill", function (d) { 
      return color(d.data.age); 
     }); 

    g.append("text") 
     .attr("transform", function (d) { 
      return "translate(" + arc.centroid(d) + ")"; 
     }) 
     .attr("dy", ".35em") 
     .text(function (d) { 
      return d.data.age; 
     }); 

    function type(d) { 
     d.population = +d.population; 
     return d; 
    }