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

【问题标题】：NVD3.js multichart with fixed x- and y-axis具有固定 x 轴和 y 轴的 NVD3.js 多图表
【发布时间】：2015-03-27 15:56:13
【问题描述】：

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

【问题讨论】：

标签： javascript d3.js axis nvd3.js

【解决方案1】：

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

所以你的问题试试

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

我无法得到 s.th。就像为 xAxis 工作一样。但我读到，如果它适用于折线图、条形图或堆积面积图，并不是所有的都适用于 multiChart，所以这可能是问题所在。

帖子：

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

更新：这是我在正在运行且在 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();

});

});

【讨论】：

我很抱歉，但这也不起作用，试试上面的 plnker。使用的版本是 plnker 提供的版本，但在我的项目中它也不起作用，即使是当前版本。我也看到了其他帖子，但似乎都没有工作
嗯很遗憾它没有运行。我发布了一些代码作为更新。请注意，d3.json(...){ } 的部分正在我的代码中使用全局函数的一些变量/函数。