d3 circle onclick event not firing

Question

I'm starting with svg and I have 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 have added a small circle into the larger 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 is not firing.

Here is the jsfiddle of the same.

Answer 1

By default you can only click on the parts of a shape that are actually drawn. Since the fill is "none" in your shape it doesn't respond to clicks. The stroke does but that's very thin and hard to click on.

If you want the inside of the undrawn circle to respond to clicks you can change the pointer-events property to say visible and the interior of the circle will then respond to clicks.

$( 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>

Answer 2

First of all the problem is not with the click event, it is the fill style. Set it to transparent and your code will work.

        .style("fill","transparent")

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

One more tips.

You can bind the click event when you create the element like this.

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

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

Answer 3

You click working but just your fill is none. So it's not working.

Else use rgba like .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>

Working Fiddle