D3單擊事件處理程序

Question

我目前正在學習D3並且有一個與交互性有關的問題。

以下示例適用於根據單擊的按鈕在屏幕上調整一組圓圈的大小。 它工作（我正在按照教程）。 本質上，CSV文件中的鍵名綁定到每個按鈕，單擊該按鈕時，將該鍵名稱中繼到附加函數（在此示例中名為buttonClick），該函數用於訪問每個對象中的鍵/值對的值。我的數據。 然后使用d3.max（）函數計算最大值，該最大值用於確定新比例並相應地重繪圓圈。

我的問題是：函數buttonClick如何知道接受綁定到每個按鈕的“data”屬性作為參數？ 為什么在onclick事件處理程序中調用函數時沒有括號？

感謝您的任何幫助，您可以提供。

function createSoccerViz() {

d3.csv("worldcup.csv", data => {overallTeamViz(data)

});

function overallTeamViz(incomingData) {   
d3.select("svg")
.append("g")
.attr("id","teamsG")
.attr("transform", "translate(50,300)")
.selectAll("g").data(incomingData).enter()
.append("g")
.attr("class", "overallG")
.attr("transform", (d,i) => "translate(" + i * 60 + "," + 0 +")");
var teamG = d3.selectAll("g.overallG")
teamG.append("circle")
.attr("r",20)
teamG.append("text")
.text(d => d.team)
.attr("y", 30)

dataKeys = Object.keys(incomingData[0])
.filter(d => d !== "team" && d !== "region")

d3.select("#controls").selectAll("button.teams")
.data(dataKeys).enter()
.append("button")
.html(d => d)
.on("click", buttonClick) ////// Why no parentheses here?


function buttonClick(datapoint) {
var maxValue = d3.max(incomingData, d => parseFloat(d[datapoint]))
var radiusScale = d3.scaleLinear().domain([0, maxValue]).range([2,20])
d3.selectAll("g.overallG").select("circle")
    .attr("r", d => radiusScale(d[datapoint]))
}

Answer 1

你有兩個問題：

1. 為什么在onclick事件處理程序中調用函數時沒有括號？

關於括號，如果你有它們......

.on("click", buttonClick())

...你將把函數的結果傳遞給事件監聽器（在你的情況下， undefined ），這不是你想要的。

相反，您希望在單擊按鈕時調用該函數，因此：

.on("click", buttonClick)

或者，或者：

.on("click", function(){
    buttonClick()
})

2. 函數buttonClick如何知道接受綁定到每個按鈕的“data”屬性作為參數？

關於API的第一個論點是明確的：

當在所選元素上調度指定事件時，將為元素評估指定的偵聽器，傳遞當前數據 （d），當前索引（i）和當前組（節點），並將其作為當前值DOM元素（nodes [i]）。 （強調我的）

因此，您不需要顯式指定第一個參數：默認情況下它將是數據。