도넛 원형 차트 코드 아래 NVD3

Question

어떤 차트를 표시하지 않습니다 내

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 어디 작동 Jsbin Link 다음과 같이 바인딩을 변경하는 경우로.

하지만 html 도우미 확장을 통해 서버 측에서 내 데이터를 바인딩하고 싶습니다. d3에 개체를 전달하는 올바른 형식은 무엇입니까? 어떤 아이디어?

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

Answer 1

귀하의 질문에 대한 대부분의 의견과 마찬가지로, 귀하의 인라인 데이터를 data1로 바꾸면 작동하는 것으로 나타났습니다.

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]}]