d3 + создать круговую диаграмму с различными форматами

Question

jsfiddle Это работы по этому формату данных для создания PieChart:

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

Как я заставить его работать на этом формате данных в этом fiddle?

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

Это линия я думаю, что я должен изменить, но я просто не достаточно иметь его:

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

Я должен заставить его работать на массив значений в новых объект данных.

Весь мой код от 2 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

вы должны изменить данные, которые вы передаете для данных присоединиться. в данном случае это values массив ваших данных:

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

также, чтобы настроить метку чертежа для этого нового формата данных, вам необходимо изменить return data[i].label; к return d.data.label;

обновленный jsFiddle