NVD3 Y轴顺序

时间:2014-03-31 20:38:09

标签: d3.js nvd3.js

我有以下折线图:http://jsfiddle.net/cp3fV/2/

var data = [
{
    "days_to_expiry": 0, 
    "close": "7.1120000000"
}, 
{
    "days_to_expiry": 1, 
    "close": "8.4580000000"
}, 
{
    "days_to_expiry": 2, 
    "close": "7.2830000000"
}, 
{
    "days_to_expiry": 3, 
    "close": "12.2820000000"    
}, 
{
    "days_to_expiry": 4, 
    "close": "7.1820000000"
}
]


nv.addGraph(function() {
  var chart = nv.models.lineChart()
                .margin({left: 100, right:50})
                .useInteractiveGuideline(true) 
                .transitionDuration(350) 
                .showLegend(false)
                .showYAxis(true) 
                .showXAxis(true)
                //.forceY([0, 19])
                .y(function (d) { return d.close })
                .x(function (d) { return d.days_to_expiry })

  ;
  console.log(data);

  chart.xAxis
      .axisLabel('Date')
      .ticks(10);

  chart.yAxis
      .axisLabel('Close')
      .tickFormat(d3.format('.03f'));

  var testData = [{key:"Test", color: '#2ca02c', values: data}];

  d3.select('#chart svg')
      .datum(testData)
      .call(chart);

  nv.utils.windowResize(function() { chart.update() }); // Update on resize
  return chart;
});

我只想订购Y轴从最小到最大。如果所有值都<10

,它可以正常工作

我知道我可以使用forceY(min,max),但我不想每次都计算最小值(我打算用AJAX来更新图表)

1 个答案:

答案 0 :(得分:0)

如果您将数字用作数字而不是字符串,则它有效:

data.forEach(function(d) { d.close = +d.close; });

完整示例here