具有固定x轴和y轴的NVD3.js多重图表 [英] NVD3.js multichart with fixed x- and y-axis

问题描述

我正在使用NVD3.js多重图表显示各种数据.是否可以为x轴和y轴设置一个固定范围. 我已经做了一个Plunker示例: http://plnkr.co/edit/OLN87eIE21tImHktYIH6?p=preview

I´m using a NVD3.js multichart to display various data. Is it possible set a fixed range for the x- and y-axis. I´ve made a Plunker example: http://plnkr.co/edit/OLN87eIE21tImHktYIH6?p=preview

 var chart = nv.models.multiChart()
            .margin({top: 30, right: 60, bottom: 50, left: 70})
            .color(d3.scale.category10().range());
            chart.xAxis.tickFormat(function(d) {
                  return d3.time.format('%H:%m')(new Date(d));
                });

            chart.yAxis1.tickFormat(d3.format(',.1f'));
            chart.yAxis2.tickFormat(d3.format(',.1f'));
            d3.select('#diagramChart svg')
            .datum(bpmData)
            .transition().duration(500).call(chart);

我想将x轴设置为00:00到23:59，并在取消选择一个数据时停止调整其大小.与y轴相同，但与其他值相同. 有没有办法做到这一点? 谢谢！

I´d like to set the x-axis from 00:00 to 23:59 and stop it from resizing when one data is deselected. Same with the y-axis, but with other values. Is there a way to do this? Thanks!

推荐答案

您在plnkr上引用的是nvd3的较早版本.有一个文档和一个新的1.7.x版本-许多图表正在使用共享库，因为multiChart尤其容易出错. 而且您没有很好地进行搜索，对此已经有一些疑问.

you're referencing an older version of nvd3 on plnkr. There is an documentation and a new version 1.7.x - many charts are using shared libraries since especially multiChart was buggy. And you did no search really well, there are already some questions about this.

所以对于您的问题请尝试

so for your question try

            chart
            .yDomain1([0,200])
            .yDomain2([0,10]); 

我无法得到某事.就像在xAxis上工作一样.但是我读到，如果它在折线图，条形图或堆积面积图上工作，并不是全部都在multiChart中起作用，所以可能是问题所在.

I could not get s.th. like that working for xAxis. But i read not all is workin in multiChart if it works on line or bar or stacked area chart, so that could maybe the problem.

帖子:

nvd3-multi-bar-horizo​​ntal-chart-x-axis域

change-range-range-for-y-axis-nvd3 -d3

how-can-i-specify -a-domain-x-axis-in-nvd3-linechart

更新:这就是我在nvd3 1.7中运行的multiChart上的代码的一部分(但自从1.1更新以来，可能已弃用som表示法):

UPDATE: thats part of my code on a multiChart which is running and in nvd3 1.7 (but could have som deprecated notation since I updated it from 1.1):

nv.addGraph(function() {
var chart = nv.models.multiChart()
  .yDomain1([-20, 80]) 
  .yDomain2([-50, 200]) //important! works only with manual tickValues definiton (see chart1.yAxis2.tickValues([...]) !) 
  .margin({top: 30, right: 75, bottom: 40, left: 70}) //important for display of lable on y2Axis!
  ;

//chart option settings  
var options = {
    showControls: false,
    showLegend: true
}
chart1.options(options); 

d3.json(filepath, function(error, json) {
  if (error) {
    return console.warn(error);
  }
  var _inputdata = json.map(function(series) {
    series.values = series.values.map(function(d) {
      return { x: d[0], y: d[1] }
    });
    series.key = series.key.map(function(d) {
      return d[lang]
    });
  return series;
  });

  chart1.xAxis
    .axisLabel("Date")
    .tickFormat(function(d) { return (d3.time.format('%d.%m. %H:%M')(new Date(d))) })
    ;

  chart1.yAxis1
   .axisLabel('leftAxis')
   .axisLabelDistance(10)
   .tickFormat(d3.format('.2f'))
   ;

  chart1.yAxis2
    .axisLabel('rightAxis')
    .tickFormat(d3.format('.2f'))
    //(problem is, nvd3 does always tickValues of 20 and then jumps to tickVlaues of 50). 
    //not possible to set fixed steps of ticks like "y2ticks(10), workaround (-50 til 200):"
    .tickValues([-50,-25,0,25,50,75,100,125,150,175,200]) 
    ;

  d3.select('#chart_1').append("svg")
    .attr("id", "chart1")
    .attr("height", 500)
    .datum(_inputdata)
    .transition()
    .duration(300)
    .call(chart1)
    ;

  nv.utils.windowResize(function() {
    chart1.update();
  });

  //update chart to correct alignments of objects (e.g. wrapping o. elements) 
  chart1.update();

});  

});

这篇关于具有固定x轴和y轴的NVD3.js多重图表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！