Question

我正在为NVD3开发名为lineWithFocusPlusSecondary的新图表类型。它有两个图表在彼此之上。除了一个问题之外它运作良好：如果x值是日期，当你放大时，图形会以令人不快的方式被切断。使用默认的lineChart不会发生这种情况，所以我肯定做错了。

我已将我的代码放入此plnkr：https://plnkr.co/edit/9GzI0Jxi5qXZas3ljuBQ?p=preview

会喜欢一些帮助:)屏幕截图中的问题似乎是x轴域直到晚上7点05分，但我们没有数据点直到晚上7点。

这可能与我的onBrush功能有关：

function onBrush(extent) {
    var processedData = processData(container.datum()),
      dataPrimary = processedData.dataPrimary,
      dataSecondary = processedData.dataSecondary,
      seriesPrimary = processedData.seriesPrimary,
      seriesSecondary = processedData.seriesSecondary;

    updateChartData(
      getIntegerExtent(extent),
      dataPrimary,
      dataSecondary,
      seriesPrimary,
      seriesSecondary
    );
  }

  function getIntegerExtent(extent) {
    return [Math.ceil(extent[0]), Math.floor(extent[1])];
  }

  function updateAxes(extent) {
    primaryXAxis.scale(primaryChart.xScale());

    primaryXAxis.domain(extent);

    g
      .select('.nv-primary .nv-x.nv-axis')
      .transition()
      .duration(transitionDuration)
      .call(primaryXAxis);
    g
      .select('.nv-secondary .nv-ySecondary.nv-axis')
      .transition()
      .duration(transitionDuration)
      .call(yAxisSecondary);
    g
      .select('.nv-primary .nv-yPrimary.nv-axis')
      .transition()
      .duration(transitionDuration)
      .call(yAxisPrimary);
  }

  function updateChartData(currentExtent, dataPrimary, dataSecondary) {
    updateAxes(currentExtent);

    var primaryDatasetsWithinBrushExtent = !dataPrimary.length
      ? [
        {
          values: []
        }
      ]
      : dataPrimary.map(function(d) {
        var restrictedDataset = Object.assign({}, d);
        restrictedDataset.values = d.values.filter(function(d, i) {
          return (
              primaryChart.x()(d, i) >= currentExtent[0] &&
              primaryChart.x()(d, i) <= currentExtent[1]
          );
        });
        return restrictedDataset;
      });

    var primaryChartWrap = g
      .select('.nv-primary .nv-linesWrap')
      .datum(primaryDatasetsWithinBrushExtent);

    var secondaryDatasetsWithinExtent = !dataSecondary.length
      ? [
        {
          values: []
        }
      ]
      : dataSecondary.map(function(d) {
        var restrictedDataset = Object.assign({}, d);
        restrictedDataset.values = d.values.filter(function(d, i) {
          return (
              secondaryChart.x()(d, i) >= currentExtent[0] &&
              secondaryChart.x()(d, i) <= currentExtent[1]
          );
        });
        return restrictedDataset;
      });
    var focusSecondaryChartWrap = g
      .select('.nv-secondary .nv-secondaryChartWrap')
      .datum(secondaryDatasetsWithinExtent);

    primaryChart.xDomain(currentExtent);
    secondaryChart.xDomain(currentExtent);

    primaryChartWrap
      .transition()
      .duration(transitionDuration)
      .call(primaryChart);

    focusSecondaryChartWrap
      .transition()
      .duration(transitionDuration)
      .call(secondaryChart);
  }

Answer 1

我发现问题是我试图在多个位置设置xDomain。这似乎弄乱了NVD3的逻辑。删除所有.domain / .xDomain后，它完美地工作了:)

调试方法是仔细阅读lineChart.js代码并注意它没有的东西。

NVD3图表在轴附近被切断

1 个答案: