D3 circle onclick event does not shoot

Question

I start with svg and I created the following markup.

<svg width="500" height="600" class="graph-container">
  <g>
    <rect x="150" y="190" height="50" width="200" rx="30" ry="30" nodeId="1" children="3" style="fill: none; stroke: rgb(68, 68, 68);"></rect>
    <text x="250" y="220" text-anchor="middle" fill="#444" style="font-size: 24px;">root</text>

  </g>

</svg>

I added a small circle to the big rectangle through 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");
            });; 

});

but the click event does not fire.

Here is the jsfiddle of the same.

Answer 1

By default, you can only click on parts of a shape that is actually drawn. Since filling the "no" in your form, it does not respond to clicks. The move does, but it is very subtle and difficult to press.

, , -, , , .

$( 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");
			});; 

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<svg width="500" height="600" class="graph-container">
  <g>
    <rect x="150" y="190" height="50" width="200" rx="30" ry="30" nodeId="1" children="3" style="fill: none; stroke: rgb(68, 68, 68);"></rect>
    <text x="250" y="220" text-anchor="middle" fill="#444" style="font-size: 24px;">root</text>

  </g>

</svg>

Hide result

Answer 2

, fill. transparent, .

        .style("fill","transparent")

: https://jsfiddle.net/rmmbzk3a/5/

.

click , .

var addchild = node.append("circle")
            .attr("cx",320)
            .attr("cy",210)
            .attr("r",10)
            .attr("class","addchild")
            .style("fill","none")
            .style("stroke","#444")
            .on("click", function() {
                d3.select(this).style('fill', 'red'); //just to make sure
                alert("on click");
            });; 

: https://jsfiddle.net/rmmbzk3a/2/

Answer 3

"", . .

rgba .style("fill","rgba(255, 255, 255, 0)").

$( 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","rgba(255, 255, 255, 0)")
			.style("stroke","#444")
			 
       addchild.on("click", function() {
                alert("on click");
            });; 
 

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://d3js.org/d3.v3.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<svg width="500" height="600" class="graph-container">
  <g>
    <rect x="150" y="190" height="50" width="200" rx="30" ry="30" nodeId="1" children="3" style="fill: none; stroke: rgb(68, 68, 68);"></rect>
    <text x="250" y="220" text-anchor="middle" fill="#444" style="font-size: 24px;">root</text>
   
  </g>
  
</svg>

Hide result