잡히지 않은 TypeError : 'startAngle'속성을 읽을 수 없습니다.

Question

API를 통해 가져온 데이터에서 도넛 형 차트를 만들려고합니다. json 변수에 API의 데이터를 저장하지만, 그렇지 않으면 내 코드가 표준입니다.

D3.js 버전 변경으로 인해 일부 TypeErrors가 있지만 코드에 작성된 startAngle이 없어도 Uncaught TypeError 오류가 발생합니다. 정의되지 않은 'startAngle'속성을 읽을 수 없습니다. 여기

http://codepen.io/kvyb/pen/GrYzEB/ 참조 용 코드이다 :

이 문제의 코드는 codepen에 endAgle, padAngle, index, value와 data 함께,

var a = ["https://api.cryptonator.com/api/ticker/btc-usd", "https://api.cryptonator.com/api/ticker/ltc-usd", "https://api.cryptonator.com/api/ticker/eth-usd", "https://api.cryptonator.com/api/ticker/etc-usd","https://api.cryptonator.com/api/ticker/xmr-usd","https://api.cryptonator.com/api/ticker/icn-usd","https://api.cryptonator.com/api/ticker/dash-usd","https://api.cryptonator.com/api/ticker/MAID-usd","https://api.cryptonator.com/api/ticker/omni-usd","https://api.cryptonator.com/api/ticker/rep-usd"]; 

function fetch() { 
    all_data = ["{\"floor\": ["]; 
    for (index = 0; index < a.length; ++index) { 
    $.ajax({ 
     url : a[index], 
     dataType : "json", 
     async : false, 
     error : function(data){ 
     console.log("--"); 
     }, 
     success : function(data) { 
     all_data += JSON.stringify(data["ticker"]) + ','; 
     } 
    }) 
    } 
}; 

fetch() 
all_data += "]}"; 
var pos = all_data.lastIndexOf(','); 
all_data = all_data.substring(0,pos) + "" + all_data.substring(pos+1); 
console.log(all_data) 

// CHART 

var width = 960, 
    height = 500, 
    radius = Math.min(width, height)/2; 

var color = d3.scaleOrdinal() 
    .range(["#98abc5", "#8a89a6", "#7b6888", "#6b486b", "#a05d56", "#d0743c", "#ff8c00"]); 

var arc = d3.arc() 
    .outerRadius(radius - 10) 
    .innerRadius(radius - 70); 

var pie = d3.pie() 
    .sort(null) 
    .value(function(d) { return d.population; }); 

var svg = d3.select("body").append("svg") 
    .attr("width", width) 
    .attr("height", height) 
    .append("g") 
    .attr("transform", "translate(" + width/2 + "," + height/2 + ")"); 

data = JSON.parse(all_data); 

    var g = svg.selectAll(".arc") 
     .data(pie(data)) 
    .enter().append("g") 
     .attr("class", "arc"); 

    g.append("path") 
     .attr("d", arc) 
     .style("fill", function(d) { return color(d.data.base); }); 

    g.append("text") 
     .attr("transform", function(d) { return "translate(" + arc.centroid(d) + ")"; }) 
     .attr("dy", ".35em") 
     .text(function(d) { return d.data.base; }); 

function type(d) { 
    d.price = +d.price; 
    return d; 
} 

Answer 1

startAngle 생성 속성은 파이 발전기에 의해. 데이터를 파이 생성기로 올바르게 전달하지 못하면 해당 오류가 발생합니다 (여기에서 undefined은 데이터를 참조 함).

해결해야 할 두 가지 문제가 있습니다. 먼저 변수 data이 개체이며 배열을 data()에 전달해야합니다. 대신, 배열을 전달하려면 :

.data(pie(data)) 

이 있어야한다 :

.data(pie(data.floor)) 

둘째, 당신은 그 배열의 객체에 population라는 이름의 속성이 없습니다. 그래서, volume로, 당신은 당신의 데이터가 속성에 파이 발생기을 변경

여기

var pie = d3.pie() 
    .sort(null) 
    .value(function(d) { 
     return +d.volume; 
    }); 

이 Codepen입니다 : http://codepen.io/anon/pen/EZGyrL?editors=0010