我试图显示一个堆积的nvd3js图(http://nvd3.org/examples/stackedArea.html)并不断出现此错误:

state.disabled = data.map(function(d){return !! d.disabled});

堆叠... hart.js(第87行,第6列))

我的json示例:

var data = [
    {
"key":"Key1","values":
[[1009756800000,858666000],
[1041292800000,910926000],
[1072828800000,1073489000],
[1104451200000,1333281000],
[1135987200000,2168985000],[
1167523200000,3185387000],
[1199059200000,3303486000],
[1230681600000,4372067000],
[1262217600000,8688161000],
[1293753600000,12189267000],
[1325289600000,16442852000],
[1356912000000,18622678000],
[1009756800000,2551000],
[1041292800000,2484000],
[1072828800000,2416000],
]
}
,
{
"key":"Key2","values":
[[1104451200000,9348000],
[1135987200000,12642000],
[1167523200000,12127000],
[1199059200000,11661000],
[1230681600000,33554000],
[1262217600000,32146000],
[1293753600000,30462000],
[1325289600000,177327000],
[1356912000000,177882000],
[1009756800000,0],
[1041292800000,0],
[1072828800000,0],
[1104451200000,0],
[1135987200000,0],
[1167523200000,0],
]
}
,
{
"key":"Key3","values":
[[1009756800000,185679000],
[1041292800000,236607000],
[1072828800000,150931000],
[1104451200000,323469000],
[1135987200000,281266000],
[1167523200000,309607000],
[1199059200000,557171000],
[1230681600000,787080000],
[1262217600000,1084286000],
[1293753600000,1129885000],
[1325289600000,1420153000],
[1356912000000,3315623000],
[1009756800000,193891000],
[1041292800000,253113000],
[1072828800000,296447000],
]
}
];


和nvd3js代码:

//NVd3js
function defaultChartConfigBS(container, data, useGuideline) {
  if (useGuideline === undefined) useGuideline = true;
  nv.addGraph(function() {
    var chart;
    chart = nv.models.stackedAreaChart()
                  .useInteractiveGuideline(useGuideline)
                  .x(function(d) { return d[0] })
                  .y(function(d) { return d[1] })
                  .useInteractiveGuideline(true)    //Tooltips which show all data points. Very nice!
                  .rightAlignYAxis(false)      //Let's move the y-axis to the right side.
                  .transitionDuration(500)
                  .showControls(true)       //Allow user to choose 'Stacked', 'Stream', 'Expanded' mode.
                  .clipEdge(true)
                    ;

    chart.xAxis
        .tickFormat(function(d) { return d3.time.format('%x')(new Date(d)) });


    chart.yAxis
        .tickFormat(d3.format(',.2f'));

    d3.select('#' + container + ' svg')
          .datum(data)
           // .datum( [data()[0].values] ) tried the hack from stack - didnt help
        .transition().duration(20).call(chart);

    nv.utils.windowResize(chart.update);


    return chart;
  });
}

最佳答案

在nvd3js代码中:
代替

您可以使用 :

chart = nv.models.stackedAreaChart()
              .useInteractiveGuideline(useGuideline)
              .x(function(d) { return d[0] })
              .y(function(d) { return d[1] })
              .useInteractiveGuideline(true)    //Tooltips which show all data points. Very nice!
              .rightAlignYAxis(false)      //Let's move the y-axis to the right side.
              .transitionDuration(500)
              .showControls(true)       //Allow user to choose 'Stacked', 'Stream', 'Expanded' mode.
              .clipEdge(true)
                ;

并且也被
chart = nv.models.stackedAreaWithFocusChart();
                         chart.width(600).height(500)
                         .x(function (d) {
                             return d[0]
                         })
                         .y(function (d) { return d[1] })
                         .color(keyColor);

您可以使用 :
  d3.select('#' + container + ' svg')
      .datum(data)
       // .datum( [data()[0].values] ) tried the hack from stack - didnt help
    .transition().duration(20).call(chart)

10-06 15:12