NVD3.js离散条形图

我想在http://nvd3.org/examples/discreteBar.html 给出的例子，我使用下http://nvd3.org/index.html给出的CSS和JS文件入门。NVD3.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 
     } 
     ] 
    } 
    ] 

}

但它提供了以下错误。

如何解决这个问题？

来源

2016-01-28 Minudika

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

如果你看看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/

来源

2016-01-28 11:54:53 Giordano

功能.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) 
      ;

来源

2016-01-29 06:55:13

NVD3.js离散条形图

回答

相关问题