Question

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

}

但它会出现以下错误。

如何解决这个问题？

Answer 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)
            ;

Answer 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/

NVD3.js离散条形图

2 个答案: