如何/何时将事件侦听器附加到d3.js中? [英] How/when do event listeners get attached in d3.js?

问题描述

我正在尝试制作各种SVG编辑器.长话短说，我需要将鼠标事件附加到给定SVG中特定深度的<g>元素上.由于各种原因，我无法提前知道ID. SVG非常庞大，将包含数百甚至数千个元素.

I am trying to make an SVG editor of sorts. Long story short, I need to attach mouse events to <g> elements at a specific depth within a given SVG. For various reasons I cannot know the ID ahead of time. The SVG is huge and will have hundreds if not thousands of elements.

d3.selectAll("svg > g > g > g").select("g").on("mouseover", function() {
    console.log("mouseover");
  }).on("mouseout", function() {
    console.log("mouseout");          
  }).on("click", function() {
    console.log("clicked");
  });

此代码有效，但是开始之前需要很长时间.假设我有十个这样的元素将与该特定选择匹配.似乎在页面加载后的每一秒中，实际上十个鼠标中的另一个实际上都附加了鼠标事件.我想知道是否可以在d3每次附加事件时都打印控制台事件，或者我如何知道d3是否附加了它需要附加的所有内容.

This code works, but it takes a long time before it gets started. Let's say I have ten such elements that will match that particular selection. It seems like each second after page load another one of the 10 actually gets the mouse events attached. I am wondering if I can get a console event printed each time d3 attaches an event or how I can tell if d3 is done attaching everything it needs to attach.

基本上 JSFiddle 需要更快地加载鼠标事件.如果您等待几秒钟，将会看到越来越多的盒子在工作.

Basically this JSFiddle needs to load the mouse events much more quickly. If you wait a few seconds you will see more and more boxes working.

推荐答案

这是一个非常有趣的问题，我设法使它起作用，但是我没有解释为什么它起作用.如果有深入了解的人可以解释这一点，将不胜感激.

This is a very interesting problem, I managed to make it work, but I have no explanation to why this works. Would appreciate if someone with in-depth knowledge would explain this.

慢:

var targetElements = d3.selectAll("svg > g > g").select("g").select("g").select("path");
targetElements.on("mouseover", function() {
  d3.select(this)
    .style("fill", "orange");
}).on("mouseout", function() {
  d3.select(this)
    .style("fill", "BLUE");
}).on("click", function() {
  d3.select(this)
    .style("fill", "green");
});

快速:

var targetElements = d3.selectAll("svg > g > g").select("g").select("g").select("path");
targetElements.style('fill', 'white'); // Black magic - comment this out and the event handler attachment is delayed alot
targetElements.on("mouseover", function() {
  d3.select(this)
    .style("fill", "orange");
}).on("mouseout", function() {
  d3.select(this)
    .style("fill", "BLUE");
}).on("click", function() {
  d3.select(this)
    .style("fill", "green");
});

区别仅在于在将事件处理程序附加到元素之前将填充应用于元素-.style("fill", "white").on("mouseover",

The difference is only in applying fill to the elements before I attach event handlers to them - .style("fill", "white").on("mouseover",

玩耍的小提琴- https://jsfiddle.net/v8e4hnff/1/

注意:还尝试在SVG元素上使用JS本机选择器和事件处理程序附件来实现，这比D3快得多.在IE11和Chrome上的行为是相同的.

NOTE: Also tried to implement with JS native selectors and event handler attachment on the SVG elements, that was very little faster than D3. Behavior is the same on IE11 and Chrome.

如上所述，如果有人可以解释这种行为，请这样做！

As said above, if someone can explain the behavior, please do!

这篇关于如何/何时将事件侦听器附加到d3.js中?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！