NVD3.js 离散条形图答案

【问题标题】：NVD3.js discrete bar chartNVD3.js 离散条形图
【发布时间】：2016-01-28 10:47:05
【问题描述】：

我正在尝试http://nvd3.org/examples/discreteBar.html 中给出的示例我正在使用 Getting Started 下 http://nvd3.org/index.html 中给出的 css 和 js 文件。

这是我的代码。

chartTest1.html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>My First Chart</title>
        <link href="nv.d3.css" rel="stylesheet" type="text/css">
        <script src="d3.min.js"></script>
        <script src="nv.d3.min.js"></script>
    </head>
    <body>
        <svg style='height:600px'/>

        <script src="myChart.js"></script>
    </body>
</html>

myChart.js

nv.addGraph(function() {
  var chart = nv.models.discreteBarChart()
      .x(function(d) { return d.label })    //Specify the data accessors.
      .y(function(d) { return d.value })
      .staggerLabels(true)    //Too many bars and not enough room? Try staggering labels.
      .tooltips(false)        //Don't show tooltips
      .showValues(true)       //...instead, show the bar value right on top of each bar.
      .transitionDuration(350)
      ;

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

  nv.utils.windowResize(chart.update);

  return chart;
});

//Each bar represents a single discrete quantity.
function exampleData() {
 return  [ 
    {
      key: "Cumulative Return",
      values: [
        { 
          "label" : "A Label" ,
          "value" : -29.765957771107
        } , 
        { 
          "label" : "B Label" , 
          "value" : 0
        } , 
        { 
          "label" : "C Label" , 
          "value" : 32.807804682612
        } , 
        { 
          "label" : "D Label" , 
          "value" : 196.45946739256
        } , 
        { 
          "label" : "E Label" ,
          "value" : 0.19434030906893
        } , 
        { 
          "label" : "F Label" , 
          "value" : -98.079782601442
        } , 
        { 
          "label" : "G Label" , 
          "value" : -13.925743130903
        } , 
        { 
          "label" : "H Label" , 
          "value" : -5.1387322875705
        }
      ]
    }
  ]

}

但它给出了以下错误。

如何解决这个问题？

【问题讨论】：

你解决了吗？我的回答对你有帮助吗？

标签： javascript html css nvd3.js

【解决方案1】：

.transitionDuration() 函数于 2013 年 8 月推出，仅仅五个月后就被弃用了。已转发至chart.duration()。

.transitionDuration() 只会添加属性 transitionDuration ，它不会造成任何伤害并且不会抛出错误，因为它是未知的，但也不会产生任何影响。需要改成duration才能达到想要的效果。

http://nvd3-community.github.io/nvd3/examples/documentation.html#discreteBarChart

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

【讨论】：

【解决方案2】：

如果您查看 nvd3 实时代码示例，您可以看到 transitionDuration 在 d3.select('#chart svg') 部分中。

因此，为了解决您的问题，您可以删除 .transitionDuration(350) 并添加 .transition().duration(350)，如下所示：

d3.select('#chart svg')
    .datum(exampleData())
    .transition().duration(350)
    .call(chart)
;

不管怎样，我对你的图表做了一个小调子。

http://jsfiddle.net/dqpgq08g/1/

【讨论】：