1

ラベルと値の2つの単純な値を使用して円グラフを描画しています。これは私のjsonです：

{
"valuecase": {
    "times": [
        {"label": "label", "value":5},
        {"label": "label", "value":13}
    ],
    "record": [
        {"label": "label", "value":5},
        {"label": "label", "value":13}
    ]
}

}

それが最良の構造であるかどうかはわかりません。実際、d3.jsではデータ値を呼び出すことができません。これは私のコードです：

d3.json("my.json", function(json) {
data = json.valuecase;
...selectAll("path")
.data(pie(dataset.times)) //*** How call the array, only value data??
}

助言がありますか？

4

1 に答える 1

2

値の配列を pie() に渡す必要があります... d3.layout.pie().value(function(d) {return d.value; }); を試すことができます。...

d3.json("myjson.json", function(json) {

    var data = json.valuecase

    var w = 300,                           
    h = 300,   
    r = 100, 
    color = d3.scale.category20c();         
var vis = d3.select("body")
.append("svg:svg")             
.data([data.times])                   
.attr("width", w)
.attr("height", h)
        .append("svg:g")                
        .attr("transform", "translate(" + r + "," + r + ")")    

        var arc = d3.svg.arc()              
        .outerRadius(r);

var pie = d3.layout.pie()                   
  .value(function(d) { console.log(d); return d.value; });    
var arcs = vis.selectAll("g.slice")     
  .data(pie)                          
  .enter()        
  .append("svg:g")        
  .attr("class", "slice");
arcs.append("svg:path")
  .attr("fill", function(d, i) { return color(i); } ) 
  .attr("d", arc);                                
arcs.append("svg:text")                                     
  .attr("transform", function(d) {                    
            d.innerRadius = 0;
            d.outerRadius = r;
            return "translate(" + arc.centroid(d) + ")";        
        })
.attr("text-anchor", "middle")                                      
  .text(function(d, i) { return data.times[i].value; });        
});
于 2012-12-04T10:05:46.840 に答える