d가 예상 정보로 설정되지 않았습니다.

Question

d3을 사용하여 간단한 svg 원형 차트를 그립니다. 난 그냥 내 파이 차트를 표시 한 세그먼트를 얻을, 어떤 이유를 들어

/* data */ 
var pieLayout = d3.layout.pie(); 
var pieData = pieLayout([21, 32, 35, 64, 83]); 
/* generator */ 
var pieGenerator = d3.svg.arc() 
        .innerRadius(20) 
        .outerRadius(50) 
        .startAngle(function(d){ 
         console.log(d) 
         return d.startAngle } 
        ) 
        .endAngle(function(d){ 
         console.log(d) 
         return d.endAngle 
         }); 
/* usage */ 
svg.append('path').data(pieData).attr('d', pieGenerator) 

:

다음은 파이 차트와 데이터 세트를 생성하는 코드입니다. 왜 이런거야?

함수와 .endAngle 함수 안에있는 console.log을 참조하십시오. 그들은 단지 pieData 내부의 첫 번째 개체 로그 :

Object {data: 21, value: 21, startAngle: 5.721709173346517, endAngle: 6.283185307179587} (index):189 
Object {data: 21, value: 21, startAngle: 5.721709173346517, endAngle: 6.283185307179587} 

나는 그것이 pieData에 을 통해 루프의 모든 개체을 얻는 방법을뿐 아니라 첫 번째?

제가 data의 대신 datum을 이용했지만, 이것은 단지 각 루프 pieData 동등한 d했다. 다음은 데이텀을 사용하여 반영되는 console.log입니다.

[Object, Object, Object, Object, Object] 
[Object, Object, Object, Object, Object] 
Error: Invalid value for <path> attribute d="MNaN,NaNA50,50 0 1,1 NaN,NaNLNaN,NaNA20,20 0 1,0 NaN,NaNZ" 

Answer 1

D3 선택 ... 데이터 패턴을 올바르게 사용하고 있지 않습니다.

svg.selectAll("path").data(pieData) 
    .enter().append('path').attr('d', pieGenerator) 

대신에 단일 요소를 추가하고 바인딩하는 것입니다. 일반 패턴에 대한 자세한 내용은 this tutorial을 참조하십시오.