javascript - D3 单击事件处理程序

Question

我目前正在学习 D3，并且有一个与交互性相关的问题。

以下示例用于根据单击的按钮调整屏幕上一组圆圈的大小。它有效(我正在学习教程)。本质上，CSV 文件中的键名绑定(bind)到每个按钮，单击该按钮时，将该键名传递给附加函数(在本例中名为 buttonClick)，该函数用于访问每个对象中该键/值对的值我的数据。然后 d3.max() 函数用于计算最大值，该最大值用于确定新比例并相应地重新绘制圆圈。

我的问题是:函数 buttonClick 如何知道接受绑定(bind)到每个按钮的“数据”属性作为参数？为什么在 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()
})

1. buttonClick 函数如何知道接受绑定(bind)到每个按钮的“数据”属性作为参数？

关于第一个参数，API 很清楚:

When a specified event is dispatched on a selected element, the specified listener will be evaluated for the element, being passed the current datum (d), the current index (i), and the current group (nodes), with this as the current DOM element (nodes[i]). (emphasis mine)

因此，您无需显式指定第一个参数:默认情况下它将是数据。