具有固定 x 轴和 y 轴的 NVD3.js 多图

我正在使用 NVD3.js 多图来显示各种数据。是否可以为 x 轴和 y 轴设置固定范围。 我做了一个 Plunker 的例子：http://plnkr.co/edit/OLN87eIE21tImHktYIH6?p=preview 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 轴相同，但具有其他值。 有没有办法做到这一点？ 谢谢！

您正在 plnkr 上引用旧版本的 nvd3。有一个文档和一个新版本 1.7.x - 许多图表正在使用共享库，因为尤其是 multiChart 有错误。 而且你搜索得不太好，已经有一些关于这个的问题了。

所以对于你的问题尝试

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

我无法得到某物。就像 x 轴的工作一样。但我读到，如果它适用于折线图、条形图或堆积面积图，则并非所有内容都适用于多图表，因此这可能是问题所在。

posts:

nvd3-多条形水平图表 x 轴域 https://stackoverflow.com/questions/19048454/nvd3-multi-bar-horizontal-chart-x-axis-domain

更改一个 y 轴 nvd3-d3 的范围 https://stackoverflow.com/questions/17070238/change-range-for-one-y-axis-nvd3-d3

如何在 nvd3-linechart 中指定域 x 轴 https://stackoverflow.com/questions/17887542/how-can-i-specify-a-domain-x-axis-in-nvd3-linechart

更新：这是我在 nvd3 1.7 中运行的 multiChart 上的代码的一部分（但自从我从 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();

});  

});