javascript - 使用 ajax 传递数据时不显示 NVD3 折线图 - data.map 不是函数

Question

我正在尝试使用 AJAX 实现 NVD3 折线图以加载 3 个系列的 JSON 数据。

我正在使用 .NET MVC 在/Home/GetJsonMovingAverages 公开我的格式化 JSON。

如果我复制并粘贴这些数据，它会全部正确加载到图表上，但是通过 Ajax 加载它会导致它中断而不会出现明显错误。

我尝试过提醒数据以证明其已加载、使用回调来强制等待、禁用 .ajax 方法中的异步以及大量其他检查，但都没有帮助我识别或暴露问题。

这简直超出了我的范围。

下面的代码使用 d3 抓取 JSON，然后尝试在图形上呈现它。这是我尽可能接近的演示代码。我还将 JSON 数据呈现到页面以指示它何时加载以及它是正确的。 (大约需要 5-10 秒)

当 JSON 出现在页面上时，它的格式正确且正确，但没有图表出现。

编辑:JSFIDDLE

注意:现在发现在 nv.d3.js 上出现错误:TypeError: data.map is not a function(第 5476 行，第 23 列)但仅在使用 ajax 时强>. (nv.d3.min.js 中的 m.map)

(function ($) {
    'use strict';
    $(document).ready(function () {
        // Load chart data
        d3.json('/Home/GetJsonMovingAverages', function (data) {
            // Renders a line chart
            (function () {
                nv.addGraph(function () {               //This adds the chart to a global rendering queue.
                    var chart = nv.models.lineChart();  //Create instance of nvd3 lineChart

                    $("p.jsonData").html(data); // What's going on here?!

                    chart.xAxis
                        .axisLabel("Date")              //Set X-axis attributes
                        .tickFormat(function (d) { return d3.time.format('%d/%m/%Y')(new Date(d)); });;             

                    chart.yAxis
                        .axisLabel("Moving Average(s)"); //Set Y-Axis attributes.
                        //.tickFormat(d3.format("d"));    //Set Y-Axis label formatting.

                    d3.select("svg")                    //Select the document's <svg> element
                        .datum(data)                    //Attach data to the <svg> element.
                        .transition().duration(500).call(chart);    //Define transition and pass the d3.selection to our lineChart.

                    nv.utils.windowResize(              //Updates the window resize event callback.
                            function () {
                                chart.update();         //Renders the chart when window is resized.
                            }
                        );

                    return chart;   //Must return the enclosed chart variable so the global rendering queue can store it.
                });
            })();
        });
    });
})(window.jQuery);

但是，如果我复制页面上返回的数据，并将其相同地粘贴到方法中，那么它就完全可以正常工作:

d3.select("svg")                    //Select the document's <svg> element
    .datum([{ key: "30 Day", color: "#ffaa00", values: [{ x: 1419984000000, y: 30.0 }, { x: 1418342400000, y: 30.0 }, { x: 1417737600000, y: 30.0 }, { x: 1417132800000, y: 30.0 }, { x: 1416873600000, y: 30.0 }, { x: 1416787200000, y: 30.0 }, { x: 1416528000000, y: 30.0 }, { x: 1416441600000, y: 30.0 }, { x: 1416355200000, y: 30.0 }, { x: 1416268800000, y: 30.0 }, { x: 1416182400000, y: 30.0 }, { x: 1415923200000, y: 30.0 }, { x: 1415836800000, y: 30.0 }, { x: 1415750400000, y: 30.0 }, { x: 1415664000000, y: 30.0 }, { x: 1415577600000, y: 30.0 }, { x: 1415318400000, y: 30.0 }, { x: 1415232000000, y: 30.0 }, { x: 1415145600000, y: 30.0 }, { x: 1415059200000, y: 30.0 }, { x: 1414972800000, y: 30.0 }, { x: 1414713600000, y: 30.0 }, { x: 1414627200000, y: 30.0 }, { x: 1414540800000, y: 30.0 }, { x: 1414454400000, y: 30.0 }, { x: 1414368000000, y: 30.0 }, { x: 1414105200000, y: 30.0 }, { x: 1414018800000, y: 30.0 }, { x: 1413932400000, y: 30.0 }, { x: 1413846000000, y: 30.0 }, { x: 1413759600000, y: 30.0 }, { x: 1413500400000, y: 30.0 }, { x: 1413414000000, y: 30.0 }, { x: 1413327600000, y: 30.0 }, { x: 1413241200000, y: 30.0 }, { x: 1413154800000, y: 30.0 }, { x: 1412895600000, y: 30.0 }, { x: 1412809200000, y: 30.0 }, { x: 1412722800000, y: 30.0 }, { x: 1412636400000, y: 30.0 }, { x: 1412550000000, y: 30.0 }, { x: 1412290800000, y: 30.0 }, { x: 1412204400000, y: 30.0 }, { x: 1412118000000, y: 30.0 }, { x: 1412031600000, y: 30.0 }, { x: 1411945200000, y: 30.0 }, { x: 1411686000000, y: 30.0 }, { x: 1411599600000, y: 30.0 }, { x: 1411513200000, y: 30.0 }, { x: 1411426800000, y: 30.0 }, { x: 1411340400000, y: 30.0 }, { x: 1411081200000, y: 30.0 }, { x: 1410994800000, y: 30.0 }, { x: 1410908400000, y: 30.0 }, { x: 1410822000000, y: 30.0 }, { x: 1410735600000, y: 30.0 }, { x: 1410476400000, y: 30.0 }, { x: 1410390000000, y: 30.0 }, { x: 1410303600000, y: 30.0 }, { x: 1410217200000, y: 30.0 }, { x: 1410130800000, y: 30.0 }, { x: 1409871600000, y: 30.0 }, { x: 1409785200000, y: 30.0 }, { x: 1409698800000, y: 30.0 }, { x: 1409612400000, y: 30.0 }, { x: 1409526000000, y: 30.0 }, { x: 1409266800000, y: 30.0 }, { x: 1409180400000, y: 30.0 }, { x: 1409094000000, y: 30.0 }, { x: 1409007600000, y: 30.0 }, { x: 1408662000000, y: 30.0 }, { x: 1408575600000, y: 30.0 }, { x: 1408489200000, y: 30.0 }, { x: 1408402800000, y: 30.0 }, { x: 1408316400000, y: 30.0 }, { x: 1408057200000, y: 30.0 }, { x: 1407970800000, y: 30.0 }, { x: 1407884400000, y: 30.0 }, { x: 1407798000000, y: 30.0 }, { x: 1407711600000, y: 30.0 }, { x: 1407452400000, y: 30.0 }, { x: 1407366000000, y: 30.0 }, { x: 1407279600000, y: 30.0 }, { x: 1407193200000, y: 30.0 }, { x: 1407106800000, y: 30.0 }, { x: 1406847600000, y: 30.0 }, { x: 1406761200000, y: 30.0 }, { x: 1406674800000, y: 30.0 }, { x: 1406588400000, y: 30.0 }, { x: 1406502000000, y: 30.0 }, { x: 1406242800000, y: 30.0 }, { x: 1406156400000, y: 30.0 }, { x: 1406070000000, y: 30.0 }, { x: 1405983600000, y: 30.0 }, { x: 1405897200000, y: 30.0 }, { x: 1405638000000, y: 30.0 }, { x: 1405551600000, y: 30.0 }, { x: 1405465200000, y: 30.0 }, { x: 1405378800000, y: 30.0 }, { x: 1405292400000, y: 30.0 }, { x: 1405033200000, y: 30.0 }, { x: 1404946800000, y: 30.0 }, { x: 1404860400000, y: 30.0 }, { x: 1404774000000, y: 30.0 }, { x: 1404687600000, y: 30.0 }, { x: 1404428400000, y: 30.0 }, { x: 1404342000000, y: 30.0 }, { x: 1404255600000, y: 30.0 }, { x: 1404169200000, y: 30.0 }, { x: 1404082800000, y: 30.0 }, { x: 1403823600000, y: 30.0 }, { x: 1403737200000, y: 30.0 }, { x: 1403650800000, y: 30.0 }, { x: 1403564400000, y: 30.0 }, { x: 1403478000000, y: 30.0 }, { x: 1403218800000, y: 30.0 }, { x: 1403132400000, y: 30.0 }, { x: 1403046000000, y: 30.0 }, { x: 1402959600000, y: 30.0 }, { x: 1402873200000, y: 30.0 }, { x: 1402614000000, y: 30.0 }, { x: 1402527600000, y: 30.0 }, { x: 1402441200000, y: 30.0 }, { x: 1402354800000, y: 30.0 }, { x: 1402268400000, y: 30.0 }, { x: 1402095600000, y: 30.0 }, { x: 1402009200000, y: 30.0 }, { x: 1401922800000, y: 30.0 }, { x: 1401836400000, y: 30.0 }, { x: 1401750000000, y: 30.0 }, { x: 1401663600000, y: 30.0 }, { x: 1401490800000, y: 30.0 }, { x: 1401404400000, y: 30.0 }, { x: 1401318000000, y: 30.0 }, { x: 1401231600000, y: 30.0 }, { x: 1401145200000, y: 30.0 }, { x: 1400799600000, y: 30.0 }, { x: 1400713200000, y: 30.0 }, { x: 1400626800000, y: 30.0 }, { x: 1400540400000, y: 30.0 }, { x: 1400454000000, y: 30.0 }, { x: 1400194800000, y: 30.0 }, { x: 1400108400000, y: 30.0 }, { x: 1400022000000, y: 30.0 }, { x: 1399935600000, y: 30.0 }, { x: 1399849200000, y: 30.0 }, { x: 1399590000000, y: 30.0 }, { x: 1399503600000, y: 30.0 }, { x: 1399417200000, y: 30.0 }, { x: 1399330800000, y: 30.0 }, { x: 1398985200000, y: 30.0 }, { x: 1398898800000, y: 30.0 }, { x: 1398812400000, y: 30.0 }, { x: 1398726000000, y: 30.0 }, { x: 1398639600000, y: 30.0 }, { x: 1398380400000, y: 30.0 }, { x: 1398294000000, y: 30.0 }, { x: 1398207600000, y: 30.0 }, { x: 1398121200000, y: 30.0 }, { x: 1397948400000, y: 30.0 }, { x: 1397775600000, y: 30.0 }, { x: 1397689200000, y: 30.0 }, { x: 1397602800000, y: 30.0 }, { x: 1397516400000, y: 30.0 }, { x: 1397430000000, y: 30.0 }, { x: 1397170800000, y: 30.0 }, { x: 1397084400000, y: 30.0 }, { x: 1396998000000, y: 30.0 }, { x: 1396911600000, y: 30.0 }, { x: 1396825200000, y: 30.0 }, { x: 1396566000000, y: 30.0 }, { x: 1396479600000, y: 30.0 }, { x: 1396393200000, y: 30.0 }, { x: 1396306800000, y: 30.0 }, { x: 1396220400000, y: 30.0 }, { x: 1395964800000, y: 30.0 }, { x: 1395878400000, y: 30.0 }, { x: 1395792000000, y: 30.0 }, { x: 1395705600000, y: 30.0 }, { x: 1395619200000, y: 30.0 }, { x: 1395360000000, y: 30.0 }, { x: 1395273600000, y: 30.0 }, { x: 1395187200000, y: 30.0 }, { x: 1395100800000, y: 30.0 }, { x: 1395014400000, y: 30.0 }, { x: 1394755200000, y: 30.0 }, { x: 1394668800000, y: 30.0 }, { x: 1394582400000, y: 30.0 }, { x: 1394496000000, y: 30.0 }, { x: 1394323200000, y: 30.0 }, { x: 1394150400000, y: 30.0 }, { x: 1394064000000, y: 30.0 }, { x: 1393977600000, y: 30.0 }, { x: 1393891200000, y: 30.0 }, { x: 1393804800000, y: 30.0 }, { x: 1393718400000, y: 30.0 }, { x: 1393632000000, y: 30.0 }, { x: 1393545600000, y: 30.0 }, { x: 1393459200000, y: 30.0 }, { x: 1393372800000, y: 30.0 }, { x: 1393286400000, y: 30.0 }, { x: 1393200000000, y: 30.0 }, { x: 1392940800000, y: 30.0 }, { x: 1392854400000, y: 30.0 }, { x: 1392768000000, y: 30.0 }, { x: 1392681600000, y: 30.0 }, { x: 1392595200000, y: 30.0 }, { x: 1392336000000, y: 30.0 }, { x: 1392249600000, y: 30.0 }, { x: 1392163200000, y: 30.0 }, { x: 1392076800000, y: 30.0 }, { x: 1391990400000, y: 30.0 }, { x: 1391731200000, y: 30.0 }, { x: 1391644800000, y: 30.0 }, { x: 1391558400000, y: 30.0 }, { x: 1391472000000, y: 30.0 }, { x: 1391385600000, y: 30.0 }, { x: 1391299200000, y: 30.0 }, { x: 1391212800000, y: 30.0 }, { x: 1391126400000, y: 30.0 }, { x: 1391040000000, y: 30.0 }, { x: 1390953600000, y: 30.0 }, { x: 1390867200000, y: 30.0 }, { x: 1390780800000, y: 30.0 }, { x: 1390521600000, y: 30.0 }, { x: 1390435200000, y: 30.0 }, { x: 1390348800000, y: 30.0 }, { x: 1390262400000, y: 30.0 }, { x: 1390176000000, y: 30.0 }, { x: 1389916800000, y: 30.0 }, { x: 1389830400000, y: 30.0 }, { x: 1389744000000, y: 30.0 }, { x: 1389657600000, y: 30.0 }, { x: 1389571200000, y: 30.0 }, { x: 1389312000000, y: 30.0 }, { x: 1389225600000, y: 30.0 }, { x: 1389139200000, y: 30.0 }, { x: 1389052800000, y: 30.0 }, { x: 1388966400000, y: 30.0 }, { x: 1388707200000, y: 30.0 }, { x: 1388534400000, y: 30.0 }] }, { key: "60 Day", color: "#00ffaa", values: [{ x: 1419984000000, y: 60.0 }, { x: 1418342400000, y: 60.0 }, { x: 1417737600000, y: 60.0 }, { x: 1417132800000, y: 60.0 }, { x: 1416873600000, y: 60.0 }, { x: 1416787200000, y: 60.0 }, { x: 1416528000000, y: 60.0 }, { x: 1416441600000, y: 60.0 }, { x: 1416355200000, y: 60.0 }, { x: 1416268800000, y: 60.0 }, { x: 1416182400000, y: 60.0 }, { x: 1415923200000, y: 60.0 }, { x: 1415836800000, y: 60.0 }, { x: 1415750400000, y: 60.0 }, { x: 1415664000000, y: 60.0 }, { x: 1415577600000, y: 60.0 }, { x: 1415318400000, y: 60.0 }, { x: 1415232000000, y: 60.0 }, { x: 1415145600000, y: 60.0 }, { x: 1415059200000, y: 60.0 }, { x: 1414972800000, y: 60.0 }, { x: 1414713600000, y: 60.0 }, { x: 1414627200000, y: 60.0 }, { x: 1414540800000, y: 60.0 }, { x: 1414454400000, y: 60.0 }, { x: 1414368000000, y: 60.0 }, { x: 1414105200000, y: 60.0 }, { x: 1414018800000, y: 60.0 }, { x: 1413932400000, y: 60.0 }, { x: 1413846000000, y: 60.0 }, { x: 1413759600000, y: 60.0 }, { x: 1413500400000, y: 60.0 }, { x: 1413414000000, y: 60.0 }, { x: 1413327600000, y: 60.0 }, { x: 1413241200000, y: 60.0 }, { x: 1413154800000, y: 60.0 }, { x: 1412895600000, y: 60.0 }, { x: 1412809200000, y: 60.0 }, { x: 1412722800000, y: 60.0 }, { x: 1412636400000, y: 60.0 }, { x: 1412550000000, y: 60.0 }, { x: 1412290800000, y: 60.0 }, { x: 1412204400000, y: 60.0 }, { x: 1412118000000, y: 60.0 }, { x: 1412031600000, y: 60.0 }, { x: 1411945200000, y: 60.0 }, { x: 1411686000000, y: 60.0 }, { x: 1411599600000, y: 60.0 }, { x: 1411513200000, y: 60.0 }, { x: 1411426800000, y: 60.0 }, { x: 1411340400000, y: 60.0 }, { x: 1411081200000, y: 60.0 }, { x: 1410994800000, y: 60.0 }, { x: 1410908400000, y: 60.0 }, { x: 1410822000000, y: 60.0 }, { x: 1410735600000, y: 60.0 }, { x: 1410476400000, y: 60.0 }, { x: 1410390000000, y: 60.0 }, { x: 1410303600000, y: 60.0 }, { x: 1410217200000, y: 60.0 }, { x: 1410130800000, y: 60.0 }, { x: 1409871600000, y: 60.0 }, { x: 1409785200000, y: 60.0 }, { x: 1409698800000, y: 60.0 }, { x: 1409612400000, y: 60.0 }, { x: 1409526000000, y: 60.0 }, { x: 1409266800000, y: 60.0 }, { x: 1409180400000, y: 60.0 }, { x: 1409094000000, y: 60.0 }, { x: 1409007600000, y: 60.0 }, { x: 1408662000000, y: 60.0 }, { x: 1408575600000, y: 60.0 }, { x: 1408489200000, y: 60.0 }, { x: 1408402800000, y: 60.0 }, { x: 1408316400000, y: 60.0 }, { x: 1408057200000, y: 60.0 }, { x: 1407970800000, y: 60.0 }, { x: 1407884400000, y: 60.0 }, { x: 1407798000000, y: 60.0 }, { x: 1407711600000, y: 60.0 }, { x: 1407452400000, y: 60.0 }, { x: 1407366000000, y: 60.0 }, { x: 1407279600000, y: 60.0 }, { x: 1407193200000, y: 60.0 }, { x: 1407106800000, y: 60.0 }, { x: 1406847600000, y: 60.0 }, { x: 1406761200000, y: 60.0 }, { x: 1406674800000, y: 60.0 }, { x: 1406588400000, y: 60.0 }, { x: 1406502000000, y: 60.0 }, { x: 1406242800000, y: 60.0 }, { x: 1406156400000, y: 60.0 }, { x: 1406070000000, y: 60.0 }, { x: 1405983600000, y: 60.0 }, { x: 1405897200000, y: 60.0 }, { x: 1405638000000, y: 60.0 }, { x: 1405551600000, y: 60.0 }, { x: 1405465200000, y: 60.0 }, { x: 1405378800000, y: 60.0 }, { x: 1405292400000, y: 60.0 }, { x: 1405033200000, y: 60.0 }, { x: 1404946800000, y: 60.0 }, { x: 1404860400000, y: 60.0 }, { x: 1404774000000, y: 60.0 }, { x: 1404687600000, y: 60.0 }, { x: 1404428400000, y: 60.0 }, { x: 1404342000000, y: 60.0 }, { x: 1404255600000, y: 60.0 }, { x: 1404169200000, y: 60.0 }, { x: 1404082800000, y: 60.0 }, { x: 1403823600000, y: 60.0 }, { x: 1403737200000, y: 60.0 }, { x: 1403650800000, y: 60.0 }, { x: 1403564400000, y: 60.0 }, { x: 1403478000000, y: 60.0 }, { x: 1403218800000, y: 60.0 }, { x: 1403132400000, y: 60.0 }, { x: 1403046000000, y: 60.0 }, { x: 1402959600000, y: 60.0 }, { x: 1402873200000, y: 60.0 }, { x: 1402614000000, y: 60.0 }, { x: 1402527600000, y: 60.0 }, { x: 1402441200000, y: 60.0 }, { x: 1402354800000, y: 60.0 }, { x: 1402268400000, y: 60.0 }, { x: 1402095600000, y: 60.0 }, { x: 1402009200000, y: 60.0 }, { x: 1401922800000, y: 60.0 }, { x: 1401836400000, y: 60.0 }, { x: 1401750000000, y: 60.0 }, { x: 1401663600000, y: 60.0 }, { x: 1401490800000, y: 60.0 }, { x: 1401404400000, y: 60.0 }, { x: 1401318000000, y: 60.0 }, { x: 1401231600000, y: 60.0 }, { x: 1401145200000, y: 60.0 }, { x: 1400799600000, y: 60.0 }, { x: 1400713200000, y: 60.0 }, { x: 1400626800000, y: 60.0 }, { x: 1400540400000, y: 60.0 }, { x: 1400454000000, y: 60.0 }, { x: 1400194800000, y: 60.0 }, { x: 1400108400000, y: 60.0 }, { x: 1400022000000, y: 60.0 }, { x: 1399935600000, y: 60.0 }, { x: 1399849200000, y: 60.0 }, { x: 1399590000000, y: 60.0 }, { x: 1399503600000, y: 60.0 }, { x: 1399417200000, y: 60.0 }, { x: 1399330800000, y: 60.0 }, { x: 1398985200000, y: 60.0 }, { x: 1398898800000, y: 60.0 }, { x: 1398812400000, y: 60.0 }, { x: 1398726000000, y: 60.0 }, { x: 1398639600000, y: 60.0 }, { x: 1398380400000, y: 60.0 }, { x: 1398294000000, y: 60.0 }, { x: 1398207600000, y: 60.0 }, { x: 1398121200000, y: 60.0 }, { x: 1397948400000, y: 60.0 }, { x: 1397775600000, y: 60.0 }, { x: 1397689200000, y: 60.0 }, { x: 1397602800000, y: 60.0 }, { x: 1397516400000, y: 60.0 }, { x: 1397430000000, y: 60.0 }, { x: 1397170800000, y: 60.0 }, { x: 1397084400000, y: 60.0 }, { x: 1396998000000, y: 60.0 }, { x: 1396911600000, y: 60.0 }, { x: 1396825200000, y: 60.0 }, { x: 1396566000000, y: 60.0 }, { x: 1396479600000, y: 60.0 }, { x: 1396393200000, y: 60.0 }, { x: 1396306800000, y: 60.0 }, { x: 1396220400000, y: 60.0 }, { x: 1395964800000, y: 60.0 }, { x: 1395878400000, y: 60.0 }, { x: 1395792000000, y: 60.0 }, { x: 1395705600000, y: 60.0 }, { x: 1395619200000, y: 60.0 }, { x: 1395360000000, y: 60.0 }, { x: 1395273600000, y: 60.0 }, { x: 1395187200000, y: 60.0 }, { x: 1395100800000, y: 60.0 }, { x: 1395014400000, y: 60.0 }, { x: 1394755200000, y: 60.0 }, { x: 1394668800000, y: 60.0 }, { x: 1394582400000, y: 60.0 }, { x: 1394496000000, y: 60.0 }, { x: 1394323200000, y: 60.0 }, { x: 1394150400000, y: 60.0 }, { x: 1394064000000, y: 60.0 }, { x: 1393977600000, y: 60.0 }, { x: 1393891200000, y: 60.0 }, { x: 1393804800000, y: 60.0 }, { x: 1393718400000, y: 60.0 }, { x: 1393632000000, y: 60.0 }, { x: 1393545600000, y: 60.0 }, { x: 1393459200000, y: 60.0 }, { x: 1393372800000, y: 60.0 }, { x: 1393286400000, y: 60.0 }, { x: 1393200000000, y: 60.0 }, { x: 1392940800000, y: 60.0 }, { x: 1392854400000, y: 60.0 }, { x: 1392768000000, y: 60.0 }, { x: 1392681600000, y: 60.0 }, { x: 1392595200000, y: 60.0 }, { x: 1392336000000, y: 60.0 }, { x: 1392249600000, y: 60.0 }, { x: 1392163200000, y: 60.0 }, { x: 1392076800000, y: 60.0 }, { x: 1391990400000, y: 60.0 }, { x: 1391731200000, y: 60.0 }, { x: 1391644800000, y: 60.0 }, { x: 1391558400000, y: 60.0 }, { x: 1391472000000, y: 60.0 }, { x: 1391385600000, y: 60.0 }, { x: 1391299200000, y: 60.0 }, { x: 1391212800000, y: 60.0 }, { x: 1391126400000, y: 60.0 }, { x: 1391040000000, y: 60.0 }, { x: 1390953600000, y: 60.0 }, { x: 1390867200000, y: 60.0 }, { x: 1390780800000, y: 60.0 }, { x: 1390521600000, y: 60.0 }, { x: 1390435200000, y: 60.0 }, { x: 1390348800000, y: 60.0 }, { x: 1390262400000, y: 60.0 }, { x: 1390176000000, y: 60.0 }, { x: 1389916800000, y: 60.0 }, { x: 1389830400000, y: 60.0 }, { x: 1389744000000, y: 60.0 }, { x: 1389657600000, y: 60.0 }, { x: 1389571200000, y: 60.0 }, { x: 1389312000000, y: 60.0 }, { x: 1389225600000, y: 60.0 }, { x: 1389139200000, y: 60.0 }, { x: 1389052800000, y: 60.0 }, { x: 1388966400000, y: 60.0 }, { x: 1388707200000, y: 60.0 }, { x: 1388534400000, y: 60.0 }] }, { key: "90 Day", color: "#aa00ff", values: [{ x: 1419984000000, y: 90.0 }, { x: 1418342400000, y: 90.0 }, { x: 1417737600000, y: 90.0 }, { x: 1417132800000, y: 90.0 }, { x: 1416873600000, y: 90.0 }, { x: 1416787200000, y: 90.0 }, { x: 1416528000000, y: 90.0 }, { x: 1416441600000, y: 90.0 }, { x: 1416355200000, y: 90.0 }, { x: 1416268800000, y: 90.0 }, { x: 1416182400000, y: 90.0 }, { x: 1415923200000, y: 90.0 }, { x: 1415836800000, y: 90.0 }, { x: 1415750400000, y: 90.0 }, { x: 1415664000000, y: 90.0 }, { x: 1415577600000, y: 90.0 }, { x: 1415318400000, y: 90.0 }, { x: 1415232000000, y: 90.0 }, { x: 1415145600000, y: 90.0 }, { x: 1415059200000, y: 90.0 }, { x: 1414972800000, y: 90.0 }, { x: 1414713600000, y: 90.0 }, { x: 1414627200000, y: 90.0 }, { x: 1414540800000, y: 90.0 }, { x: 1414454400000, y: 90.0 }, { x: 1414368000000, y: 90.0 }, { x: 1414105200000, y: 90.0 }, { x: 1414018800000, y: 90.0 }, { x: 1413932400000, y: 90.0 }, { x: 1413846000000, y: 90.0 }, { x: 1413759600000, y: 90.0 }, { x: 1413500400000, y: 90.0 }, { x: 1413414000000, y: 90.0 }, { x: 1413327600000, y: 90.0 }, { x: 1413241200000, y: 90.0 }, { x: 1413154800000, y: 90.0 }, { x: 1412895600000, y: 90.0 }, { x: 1412809200000, y: 90.0 }, { x: 1412722800000, y: 90.0 }, { x: 1412636400000, y: 90.0 }, { x: 1412550000000, y: 90.0 }, { x: 1412290800000, y: 90.0 }, { x: 1412204400000, y: 90.0 }, { x: 1412118000000, y: 90.0 }, { x: 1412031600000, y: 90.0 }, { x: 1411945200000, y: 90.0 }, { x: 1411686000000, y: 90.0 }, { x: 1411599600000, y: 90.0 }, { x: 1411513200000, y: 90.0 }, { x: 1411426800000, y: 90.0 }, { x: 1411340400000, y: 90.0 }, { x: 1411081200000, y: 90.0 }, { x: 1410994800000, y: 90.0 }, { x: 1410908400000, y: 90.0 }, { x: 1410822000000, y: 90.0 }, { x: 1410735600000, y: 90.0 }, { x: 1410476400000, y: 90.0 }, { x: 1410390000000, y: 90.0 }, { x: 1410303600000, y: 90.0 }, { x: 1410217200000, y: 90.0 }, { x: 1410130800000, y: 90.0 }, { x: 1409871600000, y: 90.0 }, { x: 1409785200000, y: 90.0 }, { x: 1409698800000, y: 90.0 }, { x: 1409612400000, y: 90.0 }, { x: 1409526000000, y: 90.0 }, { x: 1409266800000, y: 90.0 }, { x: 1409180400000, y: 90.0 }, { x: 1409094000000, y: 90.0 }, { x: 1409007600000, y: 90.0 }, { x: 1408662000000, y: 90.0 }, { x: 1408575600000, y: 90.0 }, { x: 1408489200000, y: 90.0 }, { x: 1408402800000, y: 90.0 }, { x: 1408316400000, y: 90.0 }, { x: 1408057200000, y: 90.0 }, { x: 1407970800000, y: 90.0 }, { x: 1407884400000, y: 90.0 }, { x: 1407798000000, y: 90.0 }, { x: 1407711600000, y: 90.0 }, { x: 1407452400000, y: 90.0 }, { x: 1407366000000, y: 90.0 }, { x: 1407279600000, y: 90.0 }, { x: 1407193200000, y: 90.0 }, { x: 1407106800000, y: 90.0 }, { x: 1406847600000, y: 90.0 }, { x: 1406761200000, y: 90.0 }, { x: 1406674800000, y: 90.0 }, { x: 1406588400000, y: 90.0 }, { x: 1406502000000, y: 90.0 }, { x: 1406242800000, y: 90.0 }, { x: 1406156400000, y: 90.0 }, { x: 1406070000000, y: 90.0 }, { x: 1405983600000, y: 90.0 }, { x: 1405897200000, y: 90.0 }, { x: 1405638000000, y: 90.0 }, { x: 1405551600000, y: 90.0 }, { x: 1405465200000, y: 90.0 }, { x: 1405378800000, y: 90.0 }, { x: 1405292400000, y: 90.0 }, { x: 1405033200000, y: 90.0 }, { x: 1404946800000, y: 90.0 }, { x: 1404860400000, y: 90.0 }, { x: 1404774000000, y: 90.0 }, { x: 1404687600000, y: 90.0 }, { x: 1404428400000, y: 90.0 }, { x: 1404342000000, y: 90.0 }, { x: 1404255600000, y: 90.0 }, { x: 1404169200000, y: 90.0 }, { x: 1404082800000, y: 90.0 }, { x: 1403823600000, y: 90.0 }, { x: 1403737200000, y: 90.0 }, { x: 1403650800000, y: 90.0 }, { x: 1403564400000, y: 90.0 }, { x: 1403478000000, y: 90.0 }, { x: 1403218800000, y: 90.0 }, { x: 1403132400000, y: 90.0 }, { x: 1403046000000, y: 90.0 }, { x: 1402959600000, y: 90.0 }, { x: 1402873200000, y: 90.0 }, { x: 1402614000000, y: 90.0 }, { x: 1402527600000, y: 90.0 }, { x: 1402441200000, y: 90.0 }, { x: 1402354800000, y: 90.0 }, { x: 1402268400000, y: 90.0 }, { x: 1402095600000, y: 90.0 }, { x: 1402009200000, y: 90.0 }, { x: 1401922800000, y: 90.0 }, { x: 1401836400000, y: 90.0 }, { x: 1401750000000, y: 90.0 }, { x: 1401663600000, y: 90.0 }, { x: 1401490800000, y: 90.0 }, { x: 1401404400000, y: 90.0 }, { x: 1401318000000, y: 90.0 }, { x: 1401231600000, y: 90.0 }, { x: 1401145200000, y: 90.0 }, { x: 1400799600000, y: 90.0 }, { x: 1400713200000, y: 90.0 }, { x: 1400626800000, y: 90.0 }, { x: 1400540400000, y: 90.0 }, { x: 1400454000000, y: 90.0 }, { x: 1400194800000, y: 90.0 }, { x: 1400108400000, y: 90.0 }, { x: 1400022000000, y: 90.0 }, { x: 1399935600000, y: 90.0 }, { x: 1399849200000, y: 90.0 }, { x: 1399590000000, y: 90.0 }, { x: 1399503600000, y: 90.0 }, { x: 1399417200000, y: 90.0 }, { x: 1399330800000, y: 90.0 }, { x: 1398985200000, y: 90.0 }, { x: 1398898800000, y: 90.0 }, { x: 1398812400000, y: 90.0 }, { x: 1398726000000, y: 90.0 }, { x: 1398639600000, y: 90.0 }, { x: 1398380400000, y: 90.0 }, { x: 1398294000000, y: 90.0 }, { x: 1398207600000, y: 90.0 }, { x: 1398121200000, y: 90.0 }, { x: 1397948400000, y: 90.0 }, { x: 1397775600000, y: 90.0 }, { x: 1397689200000, y: 90.0 }, { x: 1397602800000, y: 90.0 }, { x: 1397516400000, y: 90.0 }, { x: 1397430000000, y: 90.0 }, { x: 1397170800000, y: 90.0 }, { x: 1397084400000, y: 90.0 }, { x: 1396998000000, y: 90.0 }, { x: 1396911600000, y: 90.0 }, { x: 1396825200000, y: 90.0 }, { x: 1396566000000, y: 90.0 }, { x: 1396479600000, y: 90.0 }, { x: 1396393200000, y: 90.0 }, { x: 1396306800000, y: 90.0 }, { x: 1396220400000, y: 90.0 }, { x: 1395964800000, y: 90.0 }, { x: 1395878400000, y: 90.0 }, { x: 1395792000000, y: 90.0 }, { x: 1395705600000, y: 90.0 }, { x: 1395619200000, y: 90.0 }, { x: 1395360000000, y: 90.0 }, { x: 1395273600000, y: 90.0 }, { x: 1395187200000, y: 90.0 }, { x: 1395100800000, y: 90.0 }, { x: 1395014400000, y: 90.0 }, { x: 1394755200000, y: 90.0 }, { x: 1394668800000, y: 90.0 }, { x: 1394582400000, y: 90.0 }, { x: 1394496000000, y: 90.0 }, { x: 1394323200000, y: 90.0 }, { x: 1394150400000, y: 90.0 }, { x: 1394064000000, y: 90.0 }, { x: 1393977600000, y: 90.0 }, { x: 1393891200000, y: 90.0 }, { x: 1393804800000, y: 90.0 }, { x: 1393718400000, y: 90.0 }, { x: 1393632000000, y: 90.0 }, { x: 1393545600000, y: 90.0 }, { x: 1393459200000, y: 90.0 }, { x: 1393372800000, y: 90.0 }, { x: 1393286400000, y: 90.0 }, { x: 1393200000000, y: 90.0 }, { x: 1392940800000, y: 90.0 }, { x: 1392854400000, y: 90.0 }, { x: 1392768000000, y: 90.0 }, { x: 1392681600000, y: 90.0 }, { x: 1392595200000, y: 90.0 }, { x: 1392336000000, y: 90.0 }, { x: 1392249600000, y: 90.0 }, { x: 1392163200000, y: 90.0 }, { x: 1392076800000, y: 90.0 }, { x: 1391990400000, y: 90.0 }, { x: 1391731200000, y: 90.0 }, { x: 1391644800000, y: 90.0 }, { x: 1391558400000, y: 90.0 }, { x: 1391472000000, y: 90.0 }, { x: 1391385600000, y: 90.0 }, { x: 1391299200000, y: 90.0 }, { x: 1391212800000, y: 90.0 }, { x: 1391126400000, y: 90.0 }, { x: 1391040000000, y: 90.0 }, { x: 1390953600000, y: 90.0 }, { x: 1390867200000, y: 90.0 }, { x: 1390780800000, y: 90.0 }, { x: 1390521600000, y: 90.0 }, { x: 1390435200000, y: 90.0 }, { x: 1390348800000, y: 90.0 }, { x: 1390262400000, y: 90.0 }, { x: 1390176000000, y: 90.0 }, { x: 1389916800000, y: 90.0 }, { x: 1389830400000, y: 90.0 }, { x: 1389744000000, y: 90.0 }, { x: 1389657600000, y: 90.0 }, { x: 1389571200000, y: 90.0 }, { x: 1389312000000, y: 90.0 }, { x: 1389225600000, y: 90.0 }, { x: 1389139200000, y: 90.0 }, { x: 1389052800000, y: 90.0 }, { x: 1388966400000, y: 90.0 }, { x: 1388707200000, y: 90.0 }, { x: 1388534400000, y: 90.0 }] }])                    //Attach data to the <svg> element.
    .transition().duration(500).call(chart);    //Define transition and pass the d3.selection to our lineChart.

如果不清楚，我的问题是:如何使用 AJAX 加载 NVD3 折线图？ (没有这些问题)非常感谢您提供的任何建议/帮助。

编辑 2:答案之后的新代码 + 使用硬编码 JSON 的示例

d3.json('http://localhost:50786/Home/GetJsonMovingAverages', function (data) {
    // Renders a line chart

    nv.addGraph(function () {
        var chart = nv.models.lineChart()
        .options({
            margin: { left: 10, bottom: 10 },
            x: function (d, i) { return i },
            showXAxis: true,
            showYAxis: true,
            tooltips: true,
            x: function (d, i) { return i },
            transitionDuration: 500
        });

        chart.useInteractiveGuideline(true);


        chart.xAxis.axisLabel("Date") //Set X-axis attributes
.tickFormat(function (d) {
    return d3.time.format('%d/%m/%Y')(new Date(d));
});
        chart.yAxis
            .axisLabel("Moving Average(s)"); //Set Y-Axis attributes.
        //.tickFormat(d3.format("d"));    //Set Y-Axis label formatting.

        d3.select('#nvd3-line svg')    //Select the <svg> element you want to render the chart in.   
           .datum([{
               "key": "30 Day",
               "values": [{
                   "x": 1417132800000,
                   "y": 35
               }, {
                   "x": 1417737600000,
                   "y": 30
               }, {
                   "x": 1418342400000,
                   "y": 40
               }, {
                   "x": 1419984000000,
                   "y": 50
               }]
           }, {
               "key": "60 Day",
               "values": [{
                   "x": 1417132800000,
                   "y": 40
               }, {
                   "x": 1417737600000,
                   "y": 50
               }, {
                   "x": 1418342400000,
                   "y": 45
               }, {
                   "x": 1419984000000,
                   "y": 40
               }]
           }, {
               "key": "90 Day",
               "values": [{
                   "x": 1417132800000,
                   "y": 50
               }, {
                   "x": 1417737600000,
                   "y": 70
               }, {
                   "x": 1418342400000,
                   "y": 50
               }, {
                   "x": 1419984000000,
                   "y": 30
               }]
           }])                  // WORKING - NOT AJAX //Populate the <svg> element with chart data...
           //.datum(data)       // NOT WORKING - AJAX //Populate the <svg> element with chart data... 
           .call(chart);          //Finally, render the chart!

        // THIS CODE ONLY NEEDS TO BE INITIATED ONCE
        nv.utils.windowResize(chart.update);
        nv.utils.windowResize(function () { d3.select('#nvd3-line svg').call(chart) });

        chart.dispatch.on('stateChange', function (e) {
            nv.log('New State:', JSON.stringify(e));
        });

        return chart;
    });
});

Answer 1

您的 JSON 无效，尽管 NVD3 喜欢它的几种不同格式，但 d3.json ajax 调用以特定方式喜欢它。

如果您将 JSON 格式设置为如下所示，则您的字符串周围缺少双引号，当您从 AJAX 调用中提取它时它会起作用。

格式正确的 JSON 片段 -

[
    {
        "key": "30 Day",
        "color": "#ffaa00",
        "values": [
            {
                "x": 1419984000000,
                "y": 30
            },
            {
                "x": 1418342400000,
                "y": 30
            },
            {
                "x": 1417737600000,
                "y": 30
            },
            {
                "x": 1417132800000,
                "y": 30
            }
        ]
    }
]

结果 - 有效的 JSON