NVD3.js 离散条形图

Question

我正在尝试 http://nvd3.org/examples/discreteBar.html 中给出的示例我正在使用 css 和入门下 http://nvd3.org/index.html 中给出的 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
        }
      ]
    }
  ]

}

但是报错如下

如何解决这个问题？

Answer 1

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

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

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

无论如何，我用你的图表做了一个 fiddle。

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

Answer 2

函数 .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)
            ;

NVD3.js 离散条形图

NVD3.js discrete bar chart

javascript

html

css

nvd3.js