NVD3.js multichart with fixed x- and y-axis

问题

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);

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!

回答1:

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]);

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.

posts:

nvd3-multi-bar-horizontal-chart-x-axis-domain

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

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

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();

});

});

来源：https://stackoverflow.com/questions/29304920/nvd3-js-multichart-with-fixed-x-and-y-axis

标签

javascript

d3.js

axis

nvd3.js