Question

有一个漂亮的图表，我想复制（然后修改）找到here。我的项目使用了Coffeescript编写的Backbone和D3.js。每个backbone.view都有自己的d3图。到目前为止，大部分情况都很好。为简洁起见，我不会复制链接中的所有代码，我已尽力将其完全复制（主要区别在于使用的数据）。所以这就是问题......图表完全呈现，事件似乎是“已注册”，但它们不会触发。我试图使用D3事件而不是骨干+ jquery事件。因此围绕事件的实际代码如下所示：

（一切都在咖啡里）

@node = @node
    .data( nodes.filter((d)-> !d.children ))
    .enter().append("text")
      .attr("class", "node")
      .attr("dy", ".31em")
      .attr("transform", (d)-> "rotate(#{d.x-90})translate(#{d.y+8},0)#{if d.x<180 then "" else "rotate(180)"}")
      .style("text-anchor", (d) -> if d.x < 180 then "start" else "end")
      .text((d) -> d.key)
      .on("mouseover", -> alert("hi"))
      .on("mouseout", -> alert("hi"))

这应该看起来与示例完全相同...文本节点（text.node）对象是我想要触发的事件。出于这个例子的目的，我不关心他们做什么，只要他们开火。我用两种方式用dev工具检查了节点。两者都表示已将侦听器添加到对象中。

1 =＆gt; （使用控制台）

> d3.selectAll("text.node")

显示所有具有属性的文本节点列表：__onmouseout: function....和__onmouseover function....

2 =＆gt;我还通过选择dom元素（再次在Elements标签下的开发工具中）和右侧列中选择Event Listeners来检查它。这也会显示mouseover和mouseout。

问题是，没有任何反应。什么都没有。我不认为这是Backbone + Jquery + D3.js组合问题，因为在简单的条形图中，将.on("mouseover", ...)添加到矩形可以完美地工作。

如果我遗漏了任何相关信息，请告诉我。这是一个相当紧张的问题，我不完全确定该问题包含哪些内容。

Answer 1

好的，在继续并继续搜索解决方案之后，我终于从头开始删除所有样式以及在页面上呈现的所有其他内容。有效。所以代码不是下铺。其他东西在干扰。我一个接一个地将其他视图添加回页面。仍然有效。我取消评论css。破碎。我花了一段时间来浏览CSS，但最终我找到了：

text{
    pointer-events: none;
}

...所以只要忽略每个文本对象上的所有指针事件......对吗？因为这听起来不错。

随着生产线的消失，一切都按照应有的方式进行。抱歉狼来了。

干杯，gs

d3.js事件已注册但未触发

1 个答案: