d3圈onclick事件未触发

我从svg开始,我创建了以下标记.

我通过d3js在较大的矩形中添加了一个小圆圈.

$( document ).ready(function() {

var node = d3.select('g');
var addchild = node.append("circle")
            .attr("cx",320)
            .attr("cy",210)
            .attr("r",10)
            .attr("class","addchild")
            .style("fill","none")
            .style("stroke","#444");

            addchild.on("click", function() {
                alert("on click");
            });; 

});

但是click事件没有触发.

这是相同的jsfiddle.

默认情况下,您只能单击实际绘制的形状部分.由于填充形状为"无",因此不会对点击进行响应.中风但确实非常薄且很难点击.

如果您希望未绘制的圆圈内部响应点击,您可以将指针事件属性更改为可见,然后圆圈内部将响应点击.

$( document ).ready(function() {

var node = d3.select('g');
var addchild = node.append("circle")
			.attr("cx",320)
			.attr("cy",210)
			.attr("r",10)
			.attr("class","addchild")
			.style("fill","none")
      .style("pointer-events","visible")
			.style("stroke","#444");
			
			addchild.on("click", function() {
				alert("on click");
			});; 

});