重新绘制D3 / SVG图表以进行打印

Question

我的网站上有D3.js图表​​。

我希望它重绘自己的打印。我知道这样做的唯一方法是使用window.matchMedia('print')和'onbeforeprint'的组合来根据窗口的大小重绘图表，因为浏览器会使窗口大小与页面大小相同事件

然而，D3并没有在Safari和Firefox中足够快地绘制图表。结果是D3重新渲染图表，但是发生得太晚了。但是，这适用于Chrome：

let beforePrint = () => {
  this.handleResize();

};
let afterPrint = () => {
  this.handleResize();
};

if (window.matchMedia) {
  window.matchMedia('print').addListener(mql => {
    if (mql.matches) {
      beforePrint();
    } else {
      afterPrint();
    }
  });
}

window.onbeforeprint = beforePrint;
window.onafterprint = afterPrint;

是否有其他选项可以重新绘制D3 / SVG图表进行打印？

Answer 1

我在图中使用了重复元素。

首先，绘制图形的打印版本，使其宽度与纸张尺寸相匹配。然后将其隐藏，并显示屏幕版本。

this answer中有关AngularJS解决方案的详细信息。