Reactjs D3V6画笔图

我正在尝试创建一个可刷时间线/游泳图。我的问题是实施刷牙。我对d3非常陌生，我发现的大多数示例都是针对d3的早期版本的，而现在情况有所不同。此外，我想删除我在整个代码中放置的@ts ignore。任何帮助都会很好

代码我想获得以下方面的帮助： 拉丝功能：

function brushed({event, selection}:any) {
        if (event.sourceEvent && event.sourceEvent.type === "zoom") return; // ignore brush-by-zoom
        var s = selection || x2.range();
        x.domain(s.map(x2.invert, x2));
        //contextArea.select(".area").attr("d", area); -- not sure how to recreate boxes
        // @ts-ignore
        contextArea.select(".axis--x").call(xAxis);
        // @ts-ignore
        svg.select(".zoom").call(zoom.transform, d3.zoomIdentity
            .scale(width / (s[1] - s[0]))
            .translate(-s[0], 0));
    }

function zoomed({event}:any) {
        if (event.sourceEvent && event.sourceEvent.type === "brush") return; // ignore zoom-by-brush
        var t = event.transform;
        x.domain(t.rescaleX(x2).domain());
        // contextArea.select(".area").attr("d", area); -- not sure how to recreate boxes ?
        // @ts-ignore
        contextArea.select(".axis--x").call(xAxis);
        // @ts-ignore
        contextArea.select(".brush").call(brush.move, x.range().map(t.invertX, t));
    }

缩放功能：

function brushed({event, selection}:any) {
        if (event.sourceEvent && event.sourceEvent.type === "zoom") return; // ignore brush-by-zoom
        var s = selection || x2.range();
        x.domain(s.map(x2.invert, x2));
        //contextArea.select(".area").attr("d", area); -- not sure how to recreate boxes
        // @ts-ignore
        contextArea.select(".axis--x").call(xAxis);
        // @ts-ignore
        svg.select(".zoom").call(zoom.transform, d3.zoomIdentity
            .scale(width / (s[1] - s[0]))
            .translate(-s[0], 0));
    }

function zoomed({event}:any) {
        if (event.sourceEvent && event.sourceEvent.type === "brush") return; // ignore zoom-by-brush
        var t = event.transform;
        x.domain(t.rescaleX(x2).domain());
        // contextArea.select(".area").attr("d", area); -- not sure how to recreate boxes ?
        // @ts-ignore
        contextArea.select(".axis--x").call(xAxis);
        // @ts-ignore
        contextArea.select(".brush").call(brush.move, x.range().map(t.invertX, t));
    }

D3我试图遵循的示例：

以下是链接：