d3 +创建具有不同格式的饼图

Question

This jsfiddle works on this format of data to create a piechart:

var data = [ { label: 'mylabel1', value: '1342' },
  { label: 'mylabel2', value: '1505' } ]

How do i get it to run on this format of data in this fiddle ?

data=[{ country: 'Australia',
            lat: '-25.274398',
            lng: '133.775136',
        values:
                [ { label: 'ham', value: '1342' },
                { label: 'kpr', value: '1505' } ] 
        }]

This is the line I think I have to change but I just don't quite have it:

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

I have to get it to work on the values array in the new data object.

All my code from the 2nd jsfiddle:

var w = 400;
var h = 400;
var r = h/2;
var color = d3.scale.category20c();

var data = [{"label":"Category A", "value":20}, 
                  {"label":"Category B", "value":50}, 
                  {"label":"Category C", "value":30}];

var data = [ { label: 'mylabel1', value: '1342' },
  { label: 'mylabel2', value: '1505' } ]

    data=[{ country: 'Australia',
                lat: '-25.274398',
                lng: '133.775136',
            values:
                    [ { label: 'ham', value: '1342' },
                    { label: 'kpr', value: '1505' } ] 
            }]


var vis = d3.select('#chart').append("svg:svg").data([data]).attr("width", w).attr("height", h).append("svg:g").attr("transform", "translate(" + r + "," + r + ")");
var pie = d3.layout.pie().value(function(d){return d.value;});

// declare an arc generator function
var arc = d3.svg.arc().outerRadius(r);

// select paths, use arc generator to draw
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", function (d) {
        // log the result of the arc generator to show how cool it is :)
        console.log(arc(d));
        return arc(d);
    });

// add the text
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[i].label;}
        );

Answer 1

you have to change the data that you pass for data join. in this case it's the values array of your data:

var vis = d3.select('#chart').append("svg:svg").data([data[0].values])

also, to adjust the label drawing to this new data format, you need change return data[i].label; to return d.data.label;

updated jsFiddle