Javascript D3单击事件处理程序
我目前正在学习D3,有一个关于互动性的问题 下面的示例根据单击的按钮调整屏幕上一组圆的大小。它很有效(我正在学习教程)。本质上,CSV文件中的密钥名绑定到每个按钮,单击按钮时,将该密钥名转发到附加函数(本例中名为buttonClick),该函数用于访问我的数据的每个对象中该密钥/值对的值。然后使用d3.max()函数计算最大值,该值用于确定新的比例并相应地重新绘制圆 我的问题是:函数buttonClick如何知道接受绑定到每个按钮的“数据”属性作为参数?为什么在onclick事件处理程序中调用函数时没有括号 谢谢你能提供的帮助Javascript D3单击事件处理程序,javascript,d3.js,event-handling,Javascript,D3.js,Event Handling,我目前正在学习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]))
}
这里有两个问题:
.on("click", buttonClick())
。。。您将把函数的结果传递给事件侦听器(在您的例子中,undefined
),而这不是您想要的
相反,您希望在单击按钮时调用函数,因此:
.on("click", buttonClick)
或者,或者:
.on("click", function(){
buttonClick()
})
因此,您不需要显式指定第一个参数:默认情况下,它将是基准。谢谢Gerardo,非常有用。这里是后续问题。我有以下代码,它以类似的方式应用一个类<代码>teamG.on(“鼠标悬停”,highlightRegion);函数highlightRegion(d){d3.selectAll(“g.overallG”).select(“circle”).attr(“class”,c=>c.region==d.region?”active:“inactive”)}确保我理解:在这种情况下,“d”变量指传递给highlight函数的原始数据(teamG对象的数据)。“c”变量是指圆对象的数据(是最近的选择)。对吗?