Question

我使用NVD3.js multichart来显示各种数据。是否可以为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轴相同，但具有其他值。有没有办法做到这一点？谢谢！

Answer 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

UPDATE：这是我运行的multiChart和nvd3 1.7中的代码的一部分（但是自从我从1.1更新后，可能有som弃用的符号）：

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

});

}）;

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

1 个答案: