我有一個基于本教程的圖表
除了當我縮放時，它的作業非常好，情節有效，但 x 軸無效。問題出在我的縮放功能上
const zoomed = (event) => {
xScale.range(
[margin.left, width - margin.right].map((d) =>
event.transform.applyX(d)
)
);
svg
.selectAll(".bars rect")
.attr("x", (d) => xScale(d.name))
.attr("width", xScale.bandwidth());
svg.selectAll(".x-axis").call(xAxis);
};
最后一行svg.selectAll(".x-axis").call(xAxis);拋出錯誤：callback.apply is not a function.
如果我登錄svg.selectAll(".x-axis")到控制臺，我會得到帶有call附加方法的相應節點，所以我不知道為什么不起作用。我正在使用 d3 7.6.1，所以這種方法可能無法以相同的方式作業，但經過研究，我找不到答案。
這是一個沙箱
uj5u.com熱心網友回復：
縮放時，您希望在gx 軸元素內重新創建 x 比例。為此，您需要像這樣在該元素上呼叫軸生成器：
axisGenerator(d3.selectAll(".x-axis"))
這相當于執行：
d3.selectAll(".x-axis").call(axisGenerator)
在您的代碼中， call() 的引數不是軸生成器。xAxis變數是 d3 選擇。所以你首先需要創建一個軸生成器：
const xAxis = d3.axisBottom(xScale).tickSizeOuter(0);
然后通過創建一個組元素來初始化 x 軸并在其上呼叫軸生成器：
svg.append("g")
.attr("transform", `translate(0, ${height - margin.bottom})`)
.attr("class", "x-axis")
.call(xAxis)
在您的縮放功能中，您可以像這樣更新 x 軸：
svg.selectAll(".x-axis").call(xAxis);
轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/523737.html
上一篇：在視窗內放置大型HTML5畫布
下一篇：帶有連接節點的鏈接的聚集氣泡