пончик Круговая диаграмма NVD3

Question

ниже код не отображается любой график мой jsbin link

data1 = [ 
{ 
values : 
[ 
    {"label":"One","value":29.765957771107}, 
    {"label":"Two","value":0}, 
    {"label":"Three","value":32.807804682612} 
] 
    } 
]; 

nv.addGraph(function() 
      { 
       var chart = nv.models.pieChart() 
       .x(function (d) { return d.label; }) 
       .y(function (d) { return d.value; }) 
       .donut(true) 
       .donutLabelsOutside(false) 
       .showLegend(true) 
       .showLabels(true); 


    d3.select("#chart svg") 
.datum([{"label":"One","value":29.765957771107},{"label":"Two","value":0.0},{"label":"Three","value":32.807804682612}]) 
     .transition().duration(100) 
     .call(chart); 

     return chart; 
    }); 

, где, как, если я изменю связывания, как показано ниже Jsbin Link он работает.

Но я хочу привязать свои данные на стороне сервера через расширение html-помощника. Какой будет правильный формат для передачи объектов на d3? любые идеи?

 d3.select("#chart svg") 
.datum(data1) 
.transition().duration(2200) 
.call(chart); 

Answer 1

Как и большинство комментариев к вашему вопросу, я обнаружил, что замена ваших встроенных данных данными1 заставляет его работать.

data1 = [ 
{ 
values : 
[ 
    {"label":"One","value":29.765957771107}, 
    {"label":"Two","value":0}, 
    {"label":"Three","value":32.807804682612} 
] 
    } 
]; 

nv.addGraph(function() 
      { 
       var chart = nv.models.pieChart() 
       .x(function (d) { return d.label; }) 
       .y(function (d) { return d.value; }) 
       .donut(true) 
       .donutLabelsOutside(false) 
       .showLegend(true) 
       .showLabels(true); 


    d3.select("#chart svg") 
.datum(data1) 
     .transition().duration(100) 
     .call(chart); 

     return chart; 
    }); 

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

nvd3 ожидает массив хэшированных параметров конфигурации, и один из них - values:. вы все равно должны следовать структуре.

Это работает:

.datum([{values:[{"label":"One","value":29.765957771107},{"label":"Two","value":0.0},{"label":"Three","value":32.807804682612}]}]) 

Все, что я делал, было взять [what you had] и сделать его [{values:[what you had]}]