I have an SVG item (created with d3). It contains a series of groups.
One group contains a series of circles, with titles (which the browser pops up automatically when you hold the mouse over the circle), and mouseover and click event handlers.
A group on top of that contains some lines joining some of the circles. These lines also have titles. When the user holds the mouse over a line, I want the title to pop up as usual. But when the user clicks on a line, I want that click to be ignored, and treated as if it was a click on whatever was underneath the line (which may be a circle).
I have done a lot of searches, but I can't see how to do that - the circle is not a parent or child of the line, so I don't think event bubbling helps.
Here is a JsFiddle with a really simple example. I would like clicking on that part of a line inside a circle to run the click event of the circle.
svg = d3.select('svg')
.style("cursor", "pointer")
// .attr("viewBox", '0 0 500, 500')
;
circles = svg.append('g');
lines = svg.append('g');
events = d3.select('#events');
var data = [
{ id: 1, x: 25, y: 25 },
{ id: 2, x: 75, y: 25 },
{ id: 3, x: 25, y: 75 },
{ id: 4, x: 75, y: 75 }
];
circles.selectAll('circle')
.data(data, d => d.id)
.join('circle')
.attr('cx', d=> d.x)
.attr('cy', d=> d.y)
.attr('r', 20)
.on('click', function(e) { events.text('circle');})
.append('title')
.text(d=> 'circle ' + d.id)
;
lines.selectAll('line')
.data(data, d => d.id)
.join('line')
.attr('x1', d=> d.x - 25)
.attr('y1', d=> d.y - 25)
.attr('x2', d=> d.x + 25)
.attr('y2', d=> d.y + 25)
.on('mouseover', function(e) { events.text('line');})
.on('mouseout', function(e) { events.html(' ');})
.append('title')
.text(d=> 'line ' + d.id)
;
<div>
<svg></svg>
</div>
<div id='events'>
</div>
<ul>
<li>Hover over yellow line to see 'line' above.</li>
<li>Click blue circle to see 'circle' above</li>
<li>I would like to see 'circle' appear when you click on that part of a line that is within a circle.</li>
</ul>