Question

我想知道你是否可以帮我解决D3问题。我花了一整夜来修复一个bug，在修好之后我仍然不明白发生了什么。

请参阅以下代码：

svg = d3.select("body")
        .append("svg")
        .attr("width", window.bboxWidth)
        .attr("height", window.bboxHeight)
        .attr("style", "cursor:crosshair")
        .on("click", addSite())

function addSite() {
    console.log("hue")
}

它是变量，函数声明为内联

svg = d3.select("body")
    .append("svg")
    .attr("width", window.bboxWidth)
    .attr("height", window.bboxHeight)
    .attr("style", "cursor:crosshair")
    .on("click", function() {
        console.log("hue")
    })

我不明白为什么，但如果我使用第一个变体，代码将在不点击的情况下执行，而在第二种情况下，它可以完美地运行。我在init函数中创建了svg，该函数被称为HTML主体的onload（）。

这令人头疼，因为我试图使用d3.mouse（this）来检索鼠标的坐标，它给了我错误“TypeError t is null”（即使使用select（“svg”）而不是 this 。在发现这个之后，我意识到它给了我这样的错误，因为这个方法在没有任何初始化的情况下被调用。

Answer 1

这两者并不相同。 addSite()调用addSite函数后的括号，这意味着返回值将作为回调传递给.on，而不是addSite函数本身！

如果在内联定义之后添加()，第二个片段会发生同样的事情：内联函数将立即被调用，其返回值（因此，没有）将作为回调传递给{{1 ，就像你的第一个片段一样。

只需传递.on无括号：

addSite

点击鼠标时调用D3函数（奇怪的行为）

1 个答案: