D3点击事件处理程序

Question

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

以下示例可根据单击的按钮在屏幕上调整一组圆圈大小。它起作用（我遵循教程）。本质上，CSV文件中的密钥名称绑定到每个按钮，单击时，将密钥名称继电给附件函数（在此示例中名为ButtonClick），该函数用于访问每个对象中每个对象中该键/值对的值我的数据。然后，D3.max（）函数用于计算最大值，该值用于确定新的比例并相应地重新绘制圆。

我的问题是：函数按钮如何知道以作为参数绑定到每个按钮的"数据"属性？为什么在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 Event Handler内部调用该功能时没有括号？

关于括号，如果您有它们...

.on("click", buttonClick())

...您将把函数的结果传递给事件侦听器（在您的情况下，undefined），这不是您想要的。

相反，您希望在单击按钮时调用该功能，因此：

.on("click", buttonClick)

或，或者，

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

2. 函数按钮如何知道接受"数据"属性作为参数绑定到每个按钮？

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

当在选定元素上派出指定的事件时，将评估指定的侦听器，以通过当前数据（d），当前索引（i）和当前组（节点），作为当前DOM元素（节点[i]）。（强调我的）

因此，您无需明确指定第一个参数：默认情况下是基准。