Question

我使用d3js创建了一些圆圈（节点），这些圆圈（节点）在点击时会触发不同的叠加层（如模态）。

单击一个类时会触发叠加层：

$(".overlay01").click(function(){
      setTimeout(
        function() {
            $(".location-modal").toggleClass("active");
        },500);
});

我将这个类从数据添加到d3节点：

var nodes = svg.selectAll("circle")
                .data(nodes)
                .enter()
                .append("a")

                .attr("class", function(d) { return d.class; })

                .append("circle")
                .attr("r", 20)
                .style("fill", "#fff")
                .style("cursor", "pointer")
                .call(force.drag);

现在......在浏览器检查器中，我可以看到节点（圆圈）已添加类（在本例中为

<a class="overlay01">

但是当我点击它时没有任何反应？！

这远非我所拥有的： http://unit60.com/karte/test06.html

我错过了什么？

Answer 1

我的猜测是你在创建元素之前应用了“click”事件。尝试使用委托，以便事件将绑定到body，然后每次事件触发委托人时，都会查看是否点击了其类“overlay01”的子项。

$("body").on("click", ".overlay01", function(){
      setTimeout(
        function() {
            $(".location-modal").toggleClass("active");
        },500);
});

另一个解决方案是等到“.overlay01”加载后再使用$(document).ready(callback)或其他方法添加事件。

Answer 2

如果可能的话，使用jQuery操作svg是一件非常痛苦的事情。特别是.attr()和toggleClass()在svg内容上无法正常运行。它们被设计为使用html，并在应用于其他命名空间时引起麻烦。你应该坚持使用d3来让事情顺利进行：

d3.selectAll(".overlay01")
  .on("click", function() {
    setTimeout(function() {
      d3.selectAll(".location-modal")
        .classed("active", function() { 
          return !d3.select(this).classed("active");   // This will actually toggle the class
        });
    },500);
  });

我在自己的便笺簿上尝试了这个代码，可能需要一些改进，但它应该让你开始

添加类来触发jquery函数

2 个答案: