Text blocking circle click method d3js

Question

To start I'm sure there is a much simpler way to do this then what I'm trying to do. I'm trying to zoom in on specific circles using d3js and have text overlaying the circle. The problem is that since the text is ontop of the circle the text blocks the onclick even that is fired when you click on the circle. Here is my code so far:

js

var svg = d3.select("svg")
    .attr("width", width)
    .attr("height", height)
    .append("g");
var node1 = svg.append("g")
    .append("circle")
     .data([offset[0]])
     .text(function(d){return d.label})
     .attr("r", 25)
     .style("fill","white") 
     .on("click", clicked);
     node1.attr("cx", 530)
     .attr("cy", 310)
     .transition()
     .delay(500)
     .duration(1000)
     .attr("r", 55)
     .attr("cx", 530)
     .attr("cy", 205);

     d3.select('g').append('text')
     .attr("id","orient")
     .attr("dx", 510)
     .attr("dy", 210)
     .attr("width", 90)
     .attr("height", 90)
     .text(function(d){return offset[0].label});
var node2 = svg.append("g")
        .append("circle")
         .data([offset[1]])
         .attr("r", 25)
         .style("fill","white")  
         .on("click", clicked);
         node2.attr("cx", 530)
         .attr("cy", 310)
         .transition()
         .delay(500)
         .duration(1000)
         .attr("r", 55)
         .attr("cx", 620)
         .attr("cy", 310);

         d3.select('g').append('text')
         .attr("id","seperate")
         .attr("dx", 590)
         .attr("dy", 315)
         .attr("width", 90)
         .attr("height", 90)
         .text(function(d){return offset[1].label});

function

 function clicked(d) {
 var imageSelected = this;
  console.log("clicked");
  var cx, cy, k, offset;
  var setClass = d.swipe_class;
    cx = d3.select(this).attr("cx");
    cy = d3.select(this).attr("cy");
    k = 2;
    cx= cx - d.xoff; 
    cy= cy - d.yoff;
    console.log("cy="+d.yoff +"cx="+ d.xoff);


  svg.transition()
      .duration(750)
      .attr("transform", "translate(" + width/2 + "," + height/2 + ")scale(" + k + ")translate(" + -cx + "," + -cy + ")");
}

Is there a way to trigger the circles click event when I click the text ontop of it? Or maybe just a better way of doing this that would allow it?

Answer 1

You can set the text to ignore pointer events:

...
.append("text")
.attr("pointer-events", "none")
...