我是新的java脚本和D3，我正在使用D3构建一些示例报告，但在stackAreaChart显示中不断面对"Uncaught TypeError: data.map is not a function"。我尽力摆脱这个错误但没有快乐。
例外：
nv.d3.js:14314 Uncaught TypeError: data.map is not a function
at nv.d3.js:14314
at nv.utils.state._set (nv.d3.js:1248)
at nv.utils.state.update (nv.d3.js:1269)
at SVGSVGElement.<anonymous> (nv.d3.js:14353)
at d3.min.js:3
at Y (d3.min.js:1)
at Array.Co.each (d3.min.js:3)
at Array.chart (nv.d3.js:14339)
at Array.Co.call (d3.min.js:3)
at Object.generate (main.js:250)
我为stackAreaChart发送的示例数据：
[{"key":"RT.Gjoa_SPS.E","values":[[1499955690000,-0.019999314282704246],[1499955
750000,0.05166495085946679],[1499955810000,-0.056664803271206064],[1499955870000
,0.08833037627180006]]},{"key":"RT.Gjoa_SPS","values":[[1499955690000,23.4658844
70517647],[1499955750000,104.52984900503316],[1499955810000,-631.4456184793839],
[1499955870000,1683.1438952034932]]},{"key":"RT.Gjoa_SPS.B","values":[[149995587
0000,0.002222081668744225]]},{"key":"RT.Gjoa_SPS.D","values":[[1499955690000,0],
[1499955750000,-0.003333234941159513],[1499955810000,0.003333234941159513],[1499
955870000,0]]}]
以下是我的完整main.js：请检查我是否缺少任何内容或需要处理以消除此错误。
main.js
var socket = io.connect('http://HOST_IP:3000');
/////////////////////////////////////////////////////////////////////////////////////////////////////
// // // TimeSeries Chart
// // /////////////////////////////////////////////////////////////////////////////////////////////////////
var timeSeriesChart;
var timeSeriesChartData = [];
//function drawTimeSeriesChart()
//{
nv.addGraph(function() {
timeSeriesChart = nv.models.lineChart().duration(750).useInteractiveGuideline(true).margin({right:40});
timeSeriesChart.xAxis.axisLabel("Timestamp").tickFormat(function(d){ return d3.time.format("%Y-%m-%d %H:%M:%S")(new Date(d));});
timeSeriesChart.yAxis.axisLabel("Stats").tickFormat(d3.format(',.2f'));
d3.select('#FMCChart1').append('svg').datum(timeSeriesChartData).call(timeSeriesChart);
nv.utils.windowResize(timeSeriesChart.update());
return timeSeriesChart;
});
//}
socket.on("timeSeriesChartData",function(timeSeriesData){
console.log("chart updated");
d3.select('#FMCChart1 svg')
.datum(timeSeriesData)
.call(timeSeriesChart);
});
/////////////////////////////////////////////////////////////////////////////////////////////////////
// // // Discrete Bar Chart
// // /////////////////////////////////////////////////////////////////////////////////////////////////////
var discreteChart;
var discreteChartData;
function drawDiscreteChart()
{
nv.addGraph(function() {
discreteChart = nv.models.discreteBarChart()
.x(function(d) { return d.label}) //Specify the data accessors.
.y(function(d) { return +d.value})
.staggerLabels(true) //Too many bars and not enough room? Try staggering labels.
//.tooltips(false) //Don't show tooltips
.showValues(true) //...instead, show the bar value right on top of each bar.
//.transitionDuration(350)
;
d3.select('#FMCChart2 svg')
.datum(discreteChartData)
.call(discreteChart);
nv.utils.windowResize(discreteChart.update);
return discreteChart;
});
}
socket.on("discreteChartData",function(disChartData){
discreteChartData=disChartData;
console.log("Discrete Chart ", disChartData[0].values[0].value);
//discreteChart.update();
drawDiscreteChart();
});
// // ///////////////////////////////////////////////////////////////////////////////////////////////
//Pie Chart
// // ///////////////////////////////////////////////////////////////////////////////////////////////
var pieChart;
var pieChartData;
function drawPieChart() {
//Donut chart example
nv.addGraph(function() {
pieChart = 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("#FMCChart3 svg")
.datum(pieChartData)
//.transition().duration(350)
.call(pieChart); /// ERROR OCCURRED ON THIS LINE
return pieChart;
});
}
socket.on("pieChartData",function(pChartData){
pieChartData=pChartData;
console.log("Pie Chart: ",pChartData[0].label,pChartData[0].value);
drawPieChart();
});
///////////////////////////////////////////////////////////////////////////////////////////////
//Donut Chart
///////////////////////////////////////////////////////////////////////////////////////////////
var donutChart;
var donutChartData;
function drawDonutChart() {
//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("#FMCChart4 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);
drawDonutChart();
});
///////////////////////////////////////////////////////////////////////////////////////////////
//Alert Chart
///////////////////////////////////////////////////////////////////////////////////////////////
socket.on('fetched-callRestAPI',function(msg){
// console.log("warning : " + msg);
console.log("Rest Call --- >> ",msg);
var data = JSON.parse(msg);
if(data.content == "true") {
$('#flag').toggleClass("card-panel green");
}
else{
$('#flag').toggleClass("card-panel red");
}
});
///////////////////////////////////////////////////////////////////////////////////////////////
//Stacked Area Chart
///////////////////////////////////////////////////////////////////////////////////////////////
var stackedAreaChart;
var stackedAreaChartData;
function drawStackedAreaChart() {
//Donut chart example
nv.addGraph(function() {
stackedAreaChart = nv.models.stackedAreaChart()
.margin({right: 100})
.x(function(d) { return d[0] }) //We can modify the data accessor functions...
.y(function(d) { return d[1] }) //...in case your data is formatted differently.
.useInteractiveGuideline(true) //Tooltips which show all data points. Very nice!
.rightAlignYAxis(true) //Let's move the y-axis to the right side.
//.transitionDuration(500)
.showControls(true) //Allow user to choose 'Stacked', 'Stream', 'Expanded' mode.
.clipEdge(true); //Configure how big you want the donut hole size to be.
//Format x-axis labels with custom function.
stackedAreaChart.xAxis
.tickFormat(function(d) {
return d3.time.format('%x')(new Date(d))
});
stackedAreaChart.yAxis
.tickFormat(d3.format(',.2f'));
d3.select("#FMCChart5 svg")
.datum(stackedAreaChartData)
//.transition().duration(350)
.call(stackedAreaChart); /// ERROR OCCURRED ON THIS LINE
return stackedAreaChart;
});
}
socket.on("openTSDBRestAPIData",function(openTSDBData){
stackedAreaChartData=openTSDBData;
console.log("stackedAreaChartData: ",openTSDBData);
drawStackedAreaChart();
});