你的第一點(diǎn)是落后于你的clip區(qū)域。例如，如果您右鍵單擊第一個(gè)可見的圓圈并檢查元素，您將看到所有 4 個(gè)圓圈元素都存在于 dom 中。第一個(gè)圓形元素位于軸的后面。
這意味著你必須將你的情節(jié)向右移動(dòng)。不幸的是，您編寫圖表的方式?jīng)]有g(shù)為主圖表附加元素，然后將圓圈和路徑附加到該g元素。因此，這必須在多個(gè)地方進(jìn)行。
首先，我們將您的剪輯路徑調(diào)整為：
svg
.append("defs")
.append("SVG:clipPath")
.attr("id", "clip")
.append("SVG:rect")
.attr("width", containerWidth)
.attr("height", height)
.attr("x", 40)
.attr("y", 0);
接下來我們調(diào)整你的圈子
scatter
.selectAll(".foo")
.data(data)
.enter()
.append("circle")
.attr("class", "foo")
.attr("transform", "translate(40,0)")
然后你的線
scatter
.append("path")
.datum(data)
.attr("class", "line")
.attr("d", line)
.attr("transform", "translate(40,0)");
您還必須為40其他元素考慮此 px 轉(zhuǎn)換。雖然我很難解構(gòu)你的svg。我認(rèn)為這應(yīng)該給你這個(gè)想法。檢查軸是否與時(shí)間點(diǎn)匹配。
更新
要使矩形隨畫筆移動(dòng)，您必須在brushedconst 函數(shù)中添加代碼，以使用更新的比例重新計(jì)算 x、y、寬度和高度。
更新2
在瀏覽完評(píng)論中提供的代碼框后，我能夠添加代碼以將矩形更新為brushedconst，如下所示，以使矩形也隨著刷牙移動(dòng)：
// update rectangles
scatter
.selectAll(".rect-elements")
.attr("x", d => {
console.log(d);
return xScale(d.startTime) - 12.5;
})
.attr("y", 0)
.attr("width", 24)
.attr("height", height + 5);
