D3和Javascript：未捕獲TypeError：無法讀取未定義的屬性'apply'

Question

我對D3和JavaScript非常陌生，我試圖建立一個基本的圓環圖，但是這個錯誤非常嚴重。我可以看到值進入donutChartData，但仍然無法在瀏覽器上顯示圖表。 線上發生錯誤.call（donutChart）;

例外：

Uncaught TypeError: Cannot read property 'apply' of undefined 
    at Array.Co.call (d3.min.js:3) 
    at Socket.<anonymous> (main.js:137) 
    at Socket.Emitter.emit (socket.io.js:7414) 
    at Socket.onevent (socket.io.js:7130) 
    at Socket.onpacket (socket.io.js:7088) 
    at Manager.<anonymous> (socket.io.js:7520) 
    at Manager.Emitter.emit (socket.io.js:7414) 
    at Manager.ondecoded (socket.io.js:2823) 
    at Decoder.<anonymous> (socket.io.js:7520) 
    at Decoder.Emitter.emit (socket.io.js:2285) 

代碼：

var donutChart; 
var donutChartData; 

//Donut chart example 
nv.addGraph(function() { 
donutChart = nv.models.pieChart() 
     .x(function(d) { return d.label }) 
     .y(function(d) { return +d.value }) 
     .showLabels(true)  //Display pie labels 
     .labelThreshold(.05) //Configure the minimum slice size for labels to show up 
     .labelType("percent") //Configure what type of data to show in the label. Can be "key", "value" or "percent" 
     .donut(true)   //Turn on Donut mode. Makes pie chart look tasty! 
     .donutRatio(0.35); //Configure how big you want the donut hole size to be.  

    d3.select("#Chart4 svg") 
     .datum(donutChartData) 
     //.transition().duration(350) 
     .call(donutChart); /// ERROR OCCURRED ON THIS LINE 

    return donutChart; 
}); 


socket.on("donutChartData",function(dChartData){ 
    donutChartData=dChartData; 
    console.log("Donut Chart: ",dChartData[0].label,dChartData[0].value); 
     d3.select("#Chart4 svg") 
     .datum(dChartData) 
     ///.transition().duration(350) 
     .call(donutChart); 
    //donutChart.update(); 
}); 

Answer 1

您的代碼應該是這樣的：

var donutChart; 
var donutChartData; 
function drawChart() { 
//Donut chart example 
nv.addGraph(function() { 
donutChart = nv.models.pieChart() 
    .x(function(d) { return d.label }) 
    .y(function(d) { return +d.value }) 
    .showLabels(true)  //Display pie labels 
    .labelThreshold(.05) //Configure the minimum slice size for labels to show up 
    .labelType("percent") //Configure what type of data to show in the label. Can be "key", "value" or "percent" 
    .donut(true)   //Turn on Donut mode. Makes pie chart look tasty! 
    .donutRatio(0.35); //Configure how big you want the donut hole size to be.  

    d3.select("#Chart4 svg") 
    .datum(donutChartData) 
    //.transition().duration(350) 
    .call(donutChart); /// ERROR OCCURRED ON THIS LINE 

return donutChart; 
}); 
} 


socket.on("donutChartData",function(dChartData){ 
    donutChartData=dChartData; 
    console.log("Donut Chart: ",dChartData[0].label,dChartData[0].value); 
    drawChart(); 
}); 

您必須繪製圖表你的圖表數據之後，你現在沒有做。