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]))
}

- Harrison Cramer

Answer 1

你在这里有两个问题：

1. 为什么在onclick事件处理程序中调用函数时没有括号？

关于括号，如果你使用它们...

.on("click", buttonClick())

如果你将函数的结果传递给事件监听器（在你的情况下，是undefined），那不是你想要的。

相反，你希望在点击按钮时调用该函数，因此应该这样做：

.on("click", buttonClick)

或者，另一种选择是：

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

2. 函数buttonClick怎么知道要接受绑定在每个按钮上的"data"属性作为参数？

关于第一个参数，API已经很清晰:

当选定元素上发生指定事件时，将对该元素评估指定的监听器，传递当前数据(d)、当前索引(i)和当前组(nodes)，其中当前DOM元素(nodes[i])为这个元素。(强调是我的)

因此，您不需要明确指定第一个参数:它将默认为数据。

- Gerardo Furtado

---

谢谢Gerardo，非常有帮助。这里有一个后续问题。我有以下代码，它以类似的方式应用类。teamG.on("mouseover", highlightRegion); function highlightRegion(d){ d3.selectAll("g.overallG").select("circle") .attr("class", c => c.region === d.region ? "active": "inactive") }为了确保我理解正确：在这种情况下，“d”变量是指传递给highlight函数的原始数据（teamG对象的数据）。“c”变量是指圆形对象的数据（最近的选择）。这正确吗？ - Harrison Cramer