Question

这是我第一次使用nvd3。当我使用官方网站的示例和数据进行练习时，我没有遇到任何问题，但是当我使用我的数据并尝试调整代码时，它不起作用。什么也没出现。当我去控制台时：未捕获的TypeError：无法在nv.d3.min.js中读取未定义的属性“map”：3

代码是：

<script type="text/javascript">


                                    d3.json('rc2.json', function(data) {
                  nv.addGraph(function() {
                    var chart = nv.models.cumulativeLineChart()
                                  .x(function(d) { return d[0] })
                                  .y(function(d) { return d[1]/100 }) //adjusting, 100% is 1.00, not 100 as it is in the data
                                  .color(d3.scale.category10().range())
                                  .useInteractiveGuideline(true)
                                  ;


                    chart.xAxis
                        .tickFormat(d3.format(',.1%'));

                    chart.yAxis
                        .tickFormat(d3.format(',.1%'));

                    d3.select('#chart svg')
                        .datum(data)
                        .call(chart);

                    //TODO: Figure out a good way to do this automatically
                    nv.utils.windowResize(chart.update);

                    return chart;
                  });
                });

    </script>

我的json文件是：

[
  {
    "key":"Australia", 
    "values":[ [1981 , 3.69951325  ],  
  [1984 , 4.345191459  ],  
  [1985 , 4.334834688  ],  
  [1986 , 4.961050131  ],  
  [1987 , 5.058185541  ],  
  [1988 , 5.277571107  ],  
  [1990 , 5.530158335  ],  
  [1992 , 6.833450497  ],  
  [1994 , 7.050000342  ],  
  [1996 , 7.311010574  ],  
  [1998 , 7.315561215  ],  
  [2000 , 7.341721069  ],  
  [2002 , 7.824333594  ],  
  [2004 , 8.340697397  ],  
  [2006 , 8.459025154  ],  
  [2008 , 8.56200096  ] ]
  }, 

  {
    "key":"Austria", 
    "values":[ [1981 , 1.937868114  ],  
  [1985 , 2.226416199  ],  
  [1989 , 2.516060447  ],  
  [1993 , 3.559508544  ],  
  [1998 , 5.105563391  ],  
  [2002 , 6.382256533  ],  
  [2004 , 6.779823943  ],  
  [2005 , 7.349212536  ],  
  [2006 , 7.408280391  ],  
  [2007 , 7.891870344  ],  
  [2008 , 8.436577089  ],  
  [2009 , 8.511296029  ],  
  [2010 , 8.899271387  ],  
  [2011 , 8.879876733  ],  
  [2012 , 9.306601788  ],  
  [2013 , 9.369786753  ]  ]
  }, 

  {
    "key":"Belgium", 
    "values":[ [1981 , 3.361670313  ],  
  [1982 , 3.582830308  ],  
    [1983 , 3.63605846  ],  
    [1984 , 3.762525291  ],  
    [1985 , 3.969797371  ],  
    [1986 , 4.200682701  ],  
    [1987 , 4.2678139  ],  
    [1988 , 4.352812645  ],  
    [1989 , 4.55287746  ],  
    [1991 , 4.632015117  ],  
    [1993 , 5.432475216  ],  
    [1994 , 5.864906121  ],  
    [1995 , 6.018207032  ],  
    [1996 , 6.471401671  ],  
    [1997 , 6.717544511  ],  
    [1998 , 6.935975984  ],  
    [1999 , 7.37225394  ],  
    [2000 , 7.423163025  ],  
    [2001 , 7.729835017  ],  
    [2002 , 7.367531524  ],  
    [2003 , 7.432000803  ],  
    [2004 , 7.714009815  ],  
    [2005 , 7.780206593  ],  
    [2006 , 8.097443887  ],  
    [2007 , 8.294343983  ],  
    [2008 , 8.249462874  ],  
    [2009 , 8.592490728  ],  
    [2010 , 9.116628437  ],  
    [2011 , 9.398219556  ],  
    [2012 , 9.618413705  ],  
    [2013 , 9.828969551  ] ]
  }, 

  ]

我知道时间格式与官方示例中的时间格式不同。我使用年数而不是日/月/年。这就是我修改chart.xAxis：

的原因

chart.xAxis
                        .tickFormat(d3.format(',.1%'));

我也知道yAxis的格式不正确，但它不应该是显示的问题，不是吗？我只是想看看它是否出现在屏幕上。在阅读了一些文档和其他问题后，我不知道该怎么办。我不知道“值”数组的长度是否相关。有什么建议吗？谢谢你提前。

Answer 1

我尝试修改你的代码：

nv.addGraph(function () {
   chart = nv.models.cumulativeLineChart()
                  .x(function (d) { return d.x })
                  .y(function (d) { return d.y / 100 })
                  .color(d3.scale.category10().range());


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

    chart.yAxis
        .tickFormat(d3.format(',.1%'));

    d3.select('#chart svg')
        .datum(json)
        .call(chart);

    nv.utils.windowResize(chart.update);

    return chart;
});

我导入了这些库：d3.v3.min.js，nv.d3.js，nv.d3.css。

这里的工作小提琴http://jsfiddle.net/umxt1tx3

这就是你要找的吗？

nvd3累积行不起作用：未捕获TypeError：无法读取未定义的属性“map”

1 个答案: