D3单击事件处理程序

我目前正在学习D3并且有一个与交互性有关的问题。D3单击事件处理程序

以下示例基于点击按钮来调整屏幕上一组圆圈的大小。它的工作原理（我正在学习一个教程）。实质上，CSV文件中的键名与每个按钮绑定，当单击该按钮时，将该键名传递给附加函数（在本例中名为buttonClick），该函数用于访问每个对象中的该键/值对的值我的数据。然后使用d3.max（）函数计算最大值，该值用于确定新比例并相应地重绘圆圈。

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

来源

2017-09-12 Harry Cramer

你在这里的两个问题：

为什么对功能有没有括号，当它被称为onclick事件处理程序内？

关于括号，如果你有他们...

.on("click", buttonClick())

...你会传递结果的功能，事件侦听器（在你的情况，undefined ），那不是你想要的。

相反，你想，当你按一下按钮，因此要调用的函数：

.on("click", buttonClick)

，或者：

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

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

关于第一参数的API是明确的：

当指定事件被选择的元件上调度，则指定的收听者将用于所述元件进行评价，被传递当前原点 （d），当前索引（i）和当前组（节点），将其作为当前DOM元素（nodes [i]）。（重点是我的）

因此，您不需要明确指定第一个参数：默认情况下它将是数据。

来源

2017-09-12 21:50:36

谢谢杰拉尔多，非常有帮助。后续跟进问题。我有以下代码，它以类似的方式应用类。 'teamG.on（“mouseover”，highlightRegion）; （d）{ d3.selectAll（“g.overallG”）。select（“circle”） .attr（“class”，c => c.region === d.region？“active”：“inactive”）}' 为了确保我明白了：在这种情况下，“d”变量是指传递给高亮函数（teamG对象的数据）的原始数据。 “c”变量是指圆对象的数据（这是最近的选择）。那是对的吗？ –

是的，你是对的。 –

D3单击事件处理程序

回答

相关问题