如何在discreteBarChart的yaxis上設置域和縮放比例nvd3.js

Question

我在其中一個應用程序中使用d3.js圖表​​。 在這裏，他們是在此圖像中 見Charts

對於Y軸金錢圖表上（在圖片查看），我想吧大小就是最大這裏爲$ 358.72四捨五入爲400，無論最大值，但我想將槓桿限制在358.72，但在Y軸上限制爲400。

代碼它是在這裏

tradesChart = [ 
     { 
     key: "Cumulative Return", 
     values: [ 
         { 
      "label" : "6E", 
      "value" : 100  }, 
        { 
      "label" : "NG", 
      "value" : 100  }, 
        { 
      "label" : "TF", 
      "value" : 67  }  ] 
     } 
    ]; 
     nv.addGraph(function() { 

     var chart = nv.models.discreteBarChart() 
      .x(function(d) { return d.label }) 
      .y(function(d) { return d.value/100 }) 
      .staggerLabels(true) 
      .showValues(true) 
      .valueFormat(d3.format('.0%')) 

     chart.yAxis.tickFormat(function(d) { return d3.format('d')(d*100) + '%'; }); 

     d3.select('#chart-trades svg') 
     .datum(tradesChart) 
     .transition().duration(500) 
     .call(chart); 

     nv.utils.windowResize(chart.update); 

     return chart; 
    }); 

請幫我解決了這一點

Answer 1

您需要修改Y軸刻度的領域。通常它從數據的最大值導出用類似下面的語句：

yScale.domain([0, d3.max(data, function (d) { return d.v; }) ]); 

在你的情況，你應該修改它更像這個：

yScale.domain([0, 400]); 

另外，如果要從數據或最小靜態值設置的最大值，你可以這樣做以下：

yScale.domain([0, d3.max(data, function (d) { return d.v > 400 ? d.v : 400; }) ]); 

傅ll example jsfiddle is here。

這就是如何與D3.js做到這一點，我不熟悉歷史悠久的nvd3.js庫，所以我不知道如何訪問該規模，但我會看看，看看我是否可以找到它。

Answer 2

力ý

標記列表強制進入Y標尺（即0或最大/最小等）。這些數字告訴d3.js要在規模中使用的值，而不是d3.js確定值。

數據類型：編號的陣列（即[0，50]

http://cmaurer.github.io/angularjs-nvd3-directives/line.chart.html