javascript - 重新绘制 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 解决方案的详细信息.