Question

我从example page获得了以下一段代码，只使用了一次正值，并且有效。现在我有一些负值，并且y轴不再正确缩放。

取景器中的图形也只是正值，一些真正大的正值通过顶部。

var chart = nv.models.lineWithFocusChart();

var d = new Date();
chart.brushExtent([d.setHours(d.getHours() - 12), new Date()]);

chart.height(800);

chart.xAxis
  //.rotateLabels(-30)
  .tickFormat(function(d) {
    return d3.time.format('%d.%m. %H:%M')(new Date(d));
  });

chart.x2Axis
  //.rotateLabels(-30)
  .tickFormat(function(d) {
    return d3.time.format('%d.%m. %H:%M')(new Date(d));
  });

chart.yTickFormat(d3.format(',.2f'));

chart.useInteractiveGuideline(true);

d3.select('#chartWrapper').append('svg')
  .datum(data)
  .transition().duration(500)
  .call(chart);

我试图找到最大值和最小值，并将域和范围设置为该值。这本来是静态的，但它既不起作用。

var chartY = {max: 0, min: 0};
$.each(data, function(i, e) {
    if ( parseInt(e.y, 10) > chartY.max) { chartY.max = parseInt(e.y, 10); }
    if ( parseInt(e.y, 10) < chartY.min) { chartY.min = parseInt(e.y, 10); }
});
chart
  .yDomain([chartY.min, 0, chartY.max])
  .yRange([chartY.min, 0, chartY.max]);

我这里有一个plnkr，也许你们有一个解决方案。 DEMO

Answer 1

我能够通过以下步骤很好地展示它：

使用最新版本的NVD3（1.8.6 - 你在1.8.1）
设置取景器的yDomain：chart.focus.yDomain([chartY.min, chartY.max])

在焦点更改时更新yDomain：

let chartY = {max: 0, min: 0};
$.each(data[0].values, function(i, e) {
    if ( parseInt(e.y, 10) > chartY.max) { chartY.max = parseInt(e.y, 10); }
    if ( parseInt(e.y, 10) < chartY.min) { chartY.min = parseInt(e.y, 10); }
});
chart.focus.yDomain([chartY.min, chartY.max])
chart.yDomain([chartY.min, chartY.max]);

const updateYDomain = (args) => {
  chartY = {max: 0, min: 0};
  const extent = [new Date(args.extent[0]).getTime(), new Date(args.extent[1]).getTime()];
  $.each(data[0].values, function(i, e) {
    const yVal = parseInt(e.y, 10);
    const xVal = parseInt(e.x, 10);

    if (yVal > chartY.max && xVal > extent[0] && xVal < extent[1]) { 
      chartY.max = yVal;
    }
    if (yVal < chartY.min  && xVal > extent[0] && xVal < extent[1]) {
      chartY.min = yVal;
    }
  });
  chart.yDomain([chartY.min, chartY.max]);
}

chart.focus.dispatch.on('brush', updateYDomain);
chart.focus.dispatch.on('onBrush', updateYDomain);

带取景器的nvd3折线图不使用负值

1 个答案: