CODEWITHSUNDEEP
jqueryd3.jssvg
Sooraj
Sooraj

Reputation: 10567

d3 circle onclick event not firing

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.

Upvotes: 7

Views: 7470

Answers (3)

ketan
ketan

Reputation: 19341

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

Upvotes: 1

Robert Longson
Robert Longson

Reputation: 124059

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>

Upvotes: 14

Fawzan
Fawzan

Reputation: 4849

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/

Upvotes: 2

Related Questions