JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/7.1.1/d3.min.js"></script>
<div>
<svg></svg>
</div>
<div id='events'>
&nbsp;
</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>

CSS

circle {
  fill: blue;
}
line {
  stroke-width: 6;
  stroke: yellow;
}

JavaScript

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('&nbsp;');})
  .append('title')
  	.text(d=> 'line ' + d.id)
  ;