TypeError:d在nvd3.js中未定义

时间:2014-06-10 09:53:53

标签: javascript d3.js nvd3.js

我有工作lineWithFocusChart,我需要将其复制到另一页。 现在,当我运行它时,我在Firebug的控制台中看到了这条消息:

  

TypeError:d未定义 scatter.js(第240行)

     

if(d.data.length === 0)

在使用Firebug的调试功能进行一些试验和错误后,我还没有找到解决方案,所以我会给你我的代码,看看是否有我的问题。我失踪了。

HTML页面:

<div id="grafico2" class="graficoContent" style="border: 1px solid blue; opacity:0">
    <link href="charts/line/line.css" rel="stylesheet" type="text/css">
    <script src="charts/line/libs/nv.d3.js"></script>
    <script src="charts/line/libs/tooltip.js"></script>
    <script src="charts/line/libs/utils.js"></script>
    <script src="charts/line/libs/models/legend.js"></script>
    <script src="charts/line/libs/models/axis.js"></script>
    <script src="charts/line/libs/models/scatter.js"></script>
    <script src="charts/line/libs/models/line.js"></script>
    <script src="charts/line/libs/models/lineWithFocusChart.js"></script>
    <script src="charts/line/line.js"></script>
    <div id="line" class='with-3d-shadow with-transitions'>
        <svg style="height: 700px;"></svg>
    </div>
    <script type="text/javascript">
        var lineChart = new Line();
    lineChart.draw();
    </script>
</div>

line.js:

function Line() {
    var chart               = {};

    var lineChart           = nv.models.lineWithFocusChart()
                                            .x(function(d){
                                                return new Date(d.x);
                                            });

    var dateParser          = d3.time.format("%Y-%m-%d").parse;

    function getArtworkFromKey(key){
        return testData().filter(function(el){ return el.key == key; })[0].artwork;
    }                   

    chart.draw = function(){        
        var data = testData();      
        nv.addGraph(function(){
            lineChart.margin({bottom: 40, left:50});
            var maxStreams = d3.extent(data, function(d,i){ 
                                            return d.values[i].y;
                                        })[1];
            lineChart.yDomain([0, maxStreams*(6/5)]);
            lineChart.lines.xScale(d3.time.scale());
            lineChart.xAxis.tickFormat(function(d) {
                            return d3.time.format("%d-%m-%Y")(new Date(d)); 
                       })
                       .tickValues(function(d,i){
                            var tmp = d[i].values.map(function(el){ return el.x;});
                            var res = [];                   
                            res.concat.apply(res, tmp);                 
                            return res;
                       });
            lineChart.lines2.xScale(d3.time.scale());
            lineChart.x2Axis.tickFormat(function(d) { 
                            return d3.time.format("%d-%m-%Y")(new Date(d)); 
                        })
                        .tickValues(function(d,i){
                            var tmp = d[i].values.map(function(el){ return el.x;});
                            var res = [];
                            res.concat.apply(res, tmp);
                            return res; 
                        });
            lineChart.yAxis.tickFormat(d3.format(".2s"));
            lineChart.y2Axis.tickFormat(d3.format(".2s"));
            lineChart.tooltipContent(function(key, y, e, graph) {
                var x = d3.time.format("%d-%m-%Y")(new Date(graph.point.x));
                var y = String(graph.point.y);
                var y = String(graph.point.y)  + ' streams';                
                tooltip_str = '<center><image src="' + getArtworkFromKey(key) + '"/><br/><b>'+key+'</b></br>' + y + ' il ' + x + '</center>';
                return tooltip_str;
            });         
            d3.select('#line svg')
              .datum(data)
              .call(lineChart);          
            d3.selectAll('.nv-x.nv-axis > g').attr('transform', 'translate(0,10)');                     
            return lineChart;
        });
    };

    return chart;
}

我使用testData()函数返回此 JSON 对象

function testData() {
        return [
                {
                    key: "Clean Bandit - Rather Be",
                    values: [
                        {
                            x: "2014-04-27",
                            y: 2504054
                        },
                        {
                            x: "2014-04-20",
                            y: 1905117
                        },
                        {
                            x: "2014-04-13",
                            y: 1513407
                        },
                        {
                            x: "2014-04-06",
                            y: 893984
                        }
                    ],
                    artwork: "http://o.scdn.co/300/f6c9e55802a1dbf3c4a346dd58097ad0cafe9a94"
                },
                {
                    key: "Calvin Harris - Summer",
                    values: [
                        {
                            x: "2014-04-27",
                            y: 1504054
                        },
                        {
                            x: "2014-04-20",
                            y: 805117
                        },
                        {
                            x: "2014-04-13",
                            y: 713407
                        },
                        {
                            x: "2014-04-06",
                            y: 593984
                        }
                    ],
                    artwork: "http://o.scdn.co/300/f6c9e55802a1dbf3c4a346dd58097ad0cafe9a94"
                },
                {
                    key: "David Guetta - Bad",
                    values: [
                        {
                            x: "2014-04-27",
                            y: 1504054
                        },
                        {
                            x: "2014-04-20",
                            y: 505117
                        },
                        {
                            x: "2014-04-13",
                            y: 213407
                        },
                        {
                            x: "2014-04-06",
                            y: 93984
                        }
                    ],
                    artwork: "http://o.scdn.co/300/f6c9e55802a1dbf3c4a346dd58097ad0cafe9a94"
                },
                {
                    key: "Iggy Azalea - Fancy",
                    values: [
                        {
                            x: "2014-04-27",
                            y: 2504054
                        },
                        {
                            x: "2014-04-20",
                            y: 1405117
                        },
                        {
                            x: "2014-04-13",
                            y: 513407
                        },
                        {
                            x: "2014-04-06",
                            y: 293984
                        }
                    ],
                    artwork: "http://o.scdn.co/300/d71d05ded1704bcf849465dd5e76e196847d1c0a"
                }
        ];
    }

你知道为什么会失败吗?

0 个答案:

没有答案