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離散條形圖

回答

相關問題