Best technique to crop a real-time plot to the chart time interval with D3.js and Angular

Question

I'm implementing a real-time chart with D3.js in Angular. The points are created from a buffer that is continuously fed by events arriving from a websocket connection, and the chart window is continuously shifted as time passes by. Furthermore I implemented features like zooming and panning which can change the window time interval.

All in all I have an array containing the points and a window representing a given time interval.

Currently I'm applying a filter directly on the points:

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) }
               });

This actually works, meaning that the chart is plotted correctly and I don''t have points or lines going outside the plot area.

The problem is in the way the chart is plotted. I'm using the d3.line() function, which basically requires at least 2 points to draw a line. Sometimes two consecutive points are far in time. Thus, if I only have 1 or worse no points inside the window time interval, nothing is plotted.

I was also checking a technique that makes use of the scaleTime

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

with the default "clamping" option, but I'm not sure this is what I want.

Is there anyway to apply some "cropping" directly on the svg path which is created by the D3 plotting function

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

Answer 1

You can crop an SVG path using clipping:

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

The steps are:

1. Create a <clipPath> element containing the shape of the cutout, for you a rectangle.
2. Set the clip-path attribute on the element(s) you want to crop.