Question

以下代码是我的JS文件的一部分。这只是添加一个圆圈。一切都很好，使用firebug或任何其他检查员，我可以看到类正确设置。

d3.json("relations", function(error, graph) {
   var node_circle = svg.selectAll()
            .data(graph.nodes).enter()
            .append("circle")
            .attr("class", "circle launch-node-modal")
            .attr("data-toggle", "modal")
            .attr("data-target", "#myModal")
            .attr("data-action", function(d) { return d.url; })
            .attr("data-title", "Generic Element Details")
            .attr("r", circle_r);
    }
}

然后，在同一个JS文件中，我有以下jQuery函数：

$(function (){
    $('.launch-node-modal').on('click', function () {

    });
});

问题是当我点击圆圈时，不会触发该功能。此外，正如您所看到的，我有两个属性data-togle和data-target，当我点击圆圈时，它们会一起启动我的模态。因此，属性和类设置正确。但是为什么我的函数在点击时没有捕获launch-node-modal？

在d3和jQuery之间建立联系是否有任何诀窍？

由于

Answer 1

这不是一个d3问题，而是任何动态添加内容的问题。您要做的是委派click事件。这意味着您将click事件绑定到页面加载时存在的内容（例如，正文），然后单击单击检查以查看单击了哪个元素。这是代码：

$('body').on('click', '.launch-node-modal', function() { });

Answer 2

尝试$（'body'）。on（'click'，'。launch-node-modal'，function（）

Answer 3

在找到答案30分钟后，终于得到了魔术：

d3.json("relations", function(error, graph) {
   var node_circle = svg.selectAll()
            .data(graph.nodes).enter()
            .append("circle")
            .attr("class", "circle launch-node-modal")
            .attr("data-toggle", "modal")
            .attr("data-target", "#myModal")
            .attr("data-action", function(d) { return d.url; })
            .attr("data-title", "Generic Element Details")
            .attr("r", circle_r)
            .on('click', function () {
                 alert('SOF');
             });
    }
}

所以解决方案是停止使用jQuery并直接集成代码

对于使用d3.js的类，jQuery函数不会执行

3 个答案: