使用 D3.js 和 Angular 将实时绘图裁剪为图表时间间隔的最佳技术

Question

我正在 Angular 中使用 D3.js 实现实时图表。这些点是从缓冲区创建的，该缓冲区不断接收来自 Websocket 连接的事件，并且图表窗口会随着时间的推移而不断移动。此外，我还实现了缩放和平移等可以更改窗口时间间隔的功能。

总而言之，我有一个包含点的数组和一个表示给定时间间隔的窗口。

目前我直接在点上应用过滤器：

points = this.realtimeService.events
              .filter( (e: { ts: any; value: any; }) => {
                  return ( moment.utc(e.ts).isAfter(this.windowStartTime) &&
                           moment.utc(e.ts).isBefore(this.windowStopTime) );
               })
              .map( (e: { ts: any; value: any; }) => {
                  return { x: this.xScale(moment.utc(d.ts)), y: this.yScale(d.value) }
               });

这实际上是有效的，这意味着图表绘制正确，并且我没有点或线超出绘图区域。

问题在于图表的绘制方式。我正在使用 d3.line() 函数，它基本上需要至少 2 个点才能画一条线。有时两个连续的点在时间上很远。因此，如果我在窗口时间间隔内只有 1 个或更差的没有点，则不会绘制任何内容。

我还在检查一种利用scaleTime的技术

const xScale = d3.scaleTime()
            .domain([this.windowStartTime, this.windowStopTime])
            .range([this.chartXMin, this.chartXMax]);

使用默认的“夹紧”选项，但我不确定这是否是我想要的。

是否可以直接在 D3 绘图功能创建的 svg 路径上应用一些“裁剪”

d3.select("#path-id")
          .attr('d', this.pointsToLineFunction(points);

Answer 1

您可以使用 clipping 裁剪 SVG 路径：

https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Clipping_and_masking

步骤是：

1. 创建一个包含切口形状的

   <clipPath>

   元素，为您创建一个矩形。
2. 在要裁剪的元素上设置

   clip-path

   属性。