我使用 Les Miserables 的資料找到了Mike Bostock 的
uj5u.com熱心網友回復：
這是因為方法的背景關系roww()不是正確的背景關系。
使用以下代碼創建一行：
const row = this.svg
.selectAll(".row")
.data(this.matrix)
.enter()
.append("g")
.attr("class", "row")
.attr("transform", (d, i) => `translate(0,${this.x(i)})`)
.each(this.roww);
選擇的每個節點的最后一行呼叫this.roww，但是該函式的背景關系（this關鍵字 inside this.roww）以某種方式硬編碼到它所屬的物件，因此它沒有接收到正確的背景關系，該背景關系應該是相關的實際節點物件到 DOM。
要解決此問題，您需要使用使用function關鍵字創建的常規函式??（不是箭頭函式，原因與上述相同），以便可以傳遞正確的背景關系，盡管因為您的函式精確地依賴于它的“父”背景關系（其他this），您必須在外部范圍內設定一個參考它的變數，以便可以在函式內讀取它：
// ...
const that = this;
function fillrow (row) {
// eslint-disable-next-line no-unused-vars
const cell = d3.select(this).selectAll(".cell")
.data(row.filter((d) => d.z))
.enter()
.append("rect")
.attr("class", "cell")
.attr("x", (d) => that.x(d.x))
.attr("width", that.x.bandwidth())
.attr("height", that.x.bandwidth())
.style("fill-opacity", (d) => that.z(d.z))
.style("fill", (d) =>
that.get_nodes[d.x].group === that.get_nodes[d.y].group
? that.c(that.get_nodes[d.x].group)
: null
)
.on("mouseover", that.mouseover)
.on("mouseout", that.mouseout);
}
const row = this.svg
.selectAll(".row")
.data(this.matrix)
.enter()
.append("g")
.attr("class", "row")
.attr("transform", (d, i) => `translate(0,${this.x(i)})`)
.each(fillrow);
// ...
轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/447359.html
上一篇：D3.jsrect在圖表上不顯示