javascript - 向 NVD3 multiChart 添加额外的图表，缩短图表(由于图例)修复了什么？

Question

My plunker NVD3 chart

我正在使用 NVD3's multiChart图表。当我在图表中添加额外的面积图时，图例似乎下推了图表。添加的图表越多，图表看起来就越扭曲。

请注意 2 屏幕截图中的 Y 轴比原始屏幕截图短了近 50%。

---

我尝试用 CSS 删除图例，但图表仍然变短了:

.legendWrap {
    display: none;
}

即使用 Javascript 删除了图例，图表仍然被扭曲:

removeElementsByClass('nv-legend');

function removeElementsByClass(className){
  var elements = document.getElementsByClassName(className);
  while(elements.length > 0){
      elements[0].parentNode.removeChild(elements[0]);
  }
}

知道如何解决这个问题吗？

我的完整 drawChart 函数:

function drawChart(res) {
    console.log('res',res);

    nv.addGraph(function() {
      chart = nv.models.multiChart()
        .margin({
          top: 20,
          right: 40,
          bottom: 50,
          left: 40
        })
        .interpolate("linear") // don't smooth out the lines
        .color(d3.scale.category10().range());

      chart.xAxis.tickFormat(function(d) {
        return d3.time.format('%I:%M')(new Date(d));
      });
      chart.yAxis1.tickFormat(d3.format(',f'));
      chart.yAxis2.tickFormat(function(d) {
        return '$' + d3.format(',f')(d)
      });

      d3.select('svg#chart')
        .datum(res)
        .transition().duration(500).call(chart);

      chart.tooltip.hidden(true);

      chart.update();

      d3.select('.lines2Wrap').node().parentNode.insertBefore(d3.select('.stack1Wrap').node(), d3.select('.lines2Wrap').node());

      // Add top padding to xAxis timeline:
      d3.selectAll('.nv-x.nv-axis > .nv-wrap.nv-axis > g > g.tick > text').each(function(d,i) {
          d3.select(this).attr('dy', '1.5em');
      });

      d3.selectAll('.nv-x.nv-axis > .nv-wrap.nv-axis > .nv-axisMaxMin > text').each(function(d,i) {
          d3.select(this).attr('dy', '1.5em');
      });

      nv.utils.windowResize(chart.update);

      return chart;
    });
}

Answer 1

你是对的，图例是问题的原因。您可以像这样完全删除图例，而不是在 CSS 中设置 display: none:

chart = nv.models.multiChart()
  .margin({
    top: 20,
    right: 40,
    bottom: 50,
    left: 40
  })
  .showLegend(false) // don't show the legend
  .interpolate("linear") // don't smooth out the lines
  .color(d3.scale.category10().range());

完整的工作代码 here .