TA貢獻1777條經驗 獲得超10個贊
你的第一點是落后于你的clip區域。例如，如果您右鍵單擊第一個可見的圓圈并檢查元素，您將看到所有 4 個圓圈元素都存在于 dom 中。第一個圓形元素位于軸的后面。
這意味著你必須將你的情節向右移動。不幸的是，您編寫圖表的方式沒有g為主圖表附加元素，然后將圓圈和路徑附加到該g元素。因此，這必須在多個地方進行。
首先，我們將您的剪輯路徑調整為：
svg
.append("defs")
.append("SVG:clipPath")
.attr("id", "clip")
.append("SVG:rect")
.attr("width", containerWidth)
.attr("height", height)
.attr("x", 40)
.attr("y", 0);
接下來我們調整你的圈子
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 轉換。雖然我很難解構你的svg。我認為這應該給你這個想法。檢查軸是否與時間點匹配。
更新
要使矩形隨畫筆移動，您必須在brushedconst 函數中添加代碼，以使用更新的比例重新計算 x、y、寬度和高度。
更新2
在瀏覽完評論中提供的代碼框后，我能夠添加代碼以將矩形更新為brushedconst，如下所示，以使矩形也隨著刷牙移動：
// 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);
舉報