处理重叠SVG图层中的鼠标事件
我正在使用d3.js构建地图可视化。 我正为美国各州和县绘制填充多边形。 县的SVG层位于州的层下。 填充状态，但填充不透明度设置为0; 需要填充（我认为）来捕获点击事件。
我想在州一级捕获点击事件，但我想在县一级捕捉鼠标hover事件。
但是，鼠标hover事件由州捕获，而不是传递到县。
有没有办法将事件传递到一个层或以其他方式触发该县的鼠标hover事件？
这是一个d3function，可以满足您的需求。
它通过暂时禁用顶层的指针事件，并在下一层上手动触发鼠标事件，将事件传递给较低层。
function passThruEvents(g) { g .on('mousemove.passThru', passThru) .on('mousedown.passThru', passThru) ; function passThru(d) { var e = d3.event; var prev = this.style.pointerEvents; this.style.pointerEvents = 'none'; var el = document.elementFromPoint(d3.event.x, d3.event.y); var e2 = document.createEvent('MouseEvent'); e2.initMouseEvent(e.type,e.bubbles,e.cancelable,e.view, e.detail,e.screenX,e.screenY,e.clientX,e.clientY,e.ctrlKey,e.altKey,e.shiftKey,e.metaKey,e.button,e.relatedTarget); el.dispatchEvent(e2); this.style.pointerEvents = prev; } } 如果要在单击状态时执行某些操作（如更改边框样式或形状的不透明度），可以使用每个县属于某个州的事实，并将状态分组，捕获“点击”在县中的事件中，选择相应的状态元素并更改其可视属性。 这个策略的模型：
// Setup the visualization, assuming that you have a div with id 'chart' var width = 300, height = 300, div = d3.select('#chart'), svg = div.append('svg') .attr('width', width) .attr('height', height); // Array of states, each one containing one or more counties. In this example, // the states are rectangles, but you get the idea var states = [ { width: 300, height: 300, name: 'Fake State', counties: [ {x: 5, y: 5, width: 95, height: 290, fill: '#b4a0a0'}, {x: 100, y: 5, width: 150, height: 290, fill: '#b4c0a0'}, {x: 250, y: 5, width: 45, height: 290, fill: '#a4a0c0'} ] }]; // Create a group for each state, with class state var gstates = svg.selectAll('g.state') .data(states) .enter() .append('g') .classed('state', true); // Add the state background, in this case, a transparent rectangle gstates .append('rect') .classed('state', true) .attr('width', function(d) { return d.width; }) .attr('height', function(d) { return d.height; }) .attr('fill', '#444') .attr('fill-opacity', 0.0); // For each group, add rectangles for each county, binding them to the // county array of each state. gstates.selectAll('rect.county') .data(function(d) { return d.counties; }) .enter() .append('rect') .classed('county', true) .attr('x', function(d) { return dx; }) .attr('y', function(d) { return dy; }) .attr('width', function(d) { return d.width; }) .attr('height', function(d) { return d.height; }) .attr('fill', function(d) { return d.fill; }) .on('mouseover', function() { d3.select(this).attr('fill-opacity', 0.5); }) .on('mouseout', function() { d3.select(this).attr('fill-opacity', 0.9); }) .on('click', function() { // Retrive the parent group of each county, and then select // the shape corresponding to the state and alter its properties // you can also access the state data var parent = d3.select(d3.select(this).node().parentNode), state = parent.select('rect.state'); // Output 'Fake State' console.log(parent[0][0].__data__.name); state.attr('fill-opacity', 1.0); });
这里有一个工作小提琴： http ： //jsfiddle.net/pnavarrc/PGTCM/5/ 。 问候，