Question

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

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

如果我复制并粘贴这些数据，它们都会在图表上正确加载，但是通过Ajax加载会导致它在没有明显错误的情况下中断。

我已经尝试过警告数据验证它已加载，使用回调强制等待，禁用.ajax方法中的异步，以及大量其他检查，这些都没有帮助我识别或暴露问题。

这简直超出了我的范围。

下面的代码使用d3抓取JSON，然后尝试在图形上呈现它。这和我可能做的那样接近演示代码。我还将JSON数据呈现给页面以指示何时加载它并且它是正确的。（需要约5-10秒）

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

编辑：JSFIDDLE

注意：现在发现它给出了错误： TypeError：data.map不是nv.d3.js上的函数（第5476行，第23行）但仅在使用ajax 。（m.map in nv.d3.min.js）

(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

Answer 2

我找到了一个解决方案：

jQuery.parseJSON(myAjaxLoadedData);

ajax加载数据的问题似乎是它是一个字符串。当我按照我能找到的所有例子时，我感到很困惑，他们看起来像我一样加载它。

以下是我的完整工作代码：

// Load chart data
d3.json('http://localhost:50786/Home/GetJsonMovingAverages', function (error, myData) {
    // 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
                .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.

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

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

            //chart.dispatch.on('stateChange', function (e) {
            //    nv.log('New State:', JSON.stringify(e));
            return chart;   //Must return the enclosed chart variable so the global rendering queue can store it.
            //});
        });
    })();
});

非常感谢Engl12为此解决方案付出的努力

Answer 3

确定请尝试使用此编辑过的脚本生成图表并获取JSON，它适用于我使用JSFiddle的JSON数据。

  d3.json('........php', 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('#chart1 svg')    //Select the <svg> element you want to render the chart in.   
                        .datum(data)         //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('#chart1 svg').call(chart) });

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






                        return chart;
                        });
                        });

在html中调用图表 -

  <table>
    <tr>
        <td id="chart1">
                <svg></svg>
        </td>

    </tr>
</table>

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

3 个答案: