d3.js - d3在画布上绘制svg元素

Question

我试图在不断向上滚动的画布上绘制一些东西。画布被创建为异物

this.svg = d3.select(this.root.nativeElement).append("svg")

let foreigner = this.svg.append("foreignObject")
  .attrs({
    x: 0,
    y: 0,
    width: `${this.width}`,
    height: `${this.height}`
  })

我在上面画了几条线：

let g = this.svg.append("g")
g.append("line").attrs({
  x1: 100,
  y1: 0,
  x2: 100,
  y2: this.height-1,
  stroke: "orange"
})

一切都很好，直到它开始向上滚动。滚动是一个计时器，它使用 drawImage 将图像向上绘制这么多像素，然后在底部绘制一些新的东西。对于测试，我只是将一些东西放在一起以生成随机的黑色块。

let step = 2

ctx.drawImage(ctx.canvas,
  0, step,
  this.width, this.height - step,
  0, 0,
  this.width, this.height - step)

let x = Math.floor(Math.random() * this.width)
ctx.fillStyle = "black"
ctx.fillRect(x - step, this.height - step, 5, step)

向上滚动部分有效。但是发生的情况是，当它滚动得足够多时，我的橙色线条就会消失。它们仍然在渲染的 SVG 中，并且它们在文件中仍然比画布晚（更高的 z 顺序），但它们不再可见。

是什么让它这样做？异物内部的画布是否与内置 svg 对象不一样？

标签： d3.jshtml5-canvas