CODEWITHSUNDEEP
javascriptd3.js
yavg
yavg

Reputation: 3051

trigger click when I click on a circle

I am trying to click on a circle and receive the element to which I clicked. But I am unable to execute this trigger. How can i fix it?

https://plnkr.co/edit/keLfbZ13wz8h9nMHp8pN?p=preview

var coordenadas=map.latLngToLayerPoint([coordinates[0].lat,coordinates[0].long]);
svg.append('circle').attr("cx",coordenadas.x)
.attr("cy", coordenadas.y)
.attr("r", 30)
.style("fill",'red')
.attr("class",'circulo_mapa')
.on("click", function(element){
   console.log('this is the element', element);
   alert("click")
})

Upvotes: 0

Views: 153

Answers (1)

Hugues Stefanski
Hugues Stefanski

Reputation: 1182

I forked your plunk to add two things:

  • make the circle react intercept pointer events
  • log this instead of element in the click callback (which is what you will likely want to select)

Here is the upadted method:

var coordenadas = map.latLngToLayerPoint([coordinates[0].lat,coordinates[0].long]);

//add circle on map
        var coordenadas=map.latLngToLayerPoint([coordinates[0].lat,coordinates[0].long]);
        svg.selectAll('circle').data(new Array(3))
            .enter()
            .append('circle')
            .attr("cx",function(d,i){return coordenadas.x+i*10})
            .attr("cy", function(d,i){return coordenadas.y+i*20})
            .attr("r", 30)
            .style("fill",'red')
            .style('stroke', 'black')
            .style('pointer-events', 'all')
            .style('cursor', 'pointer')
            .attr("class",'circulo_mapa')
            .on("click", function(d,i){
              console.log('this is the element', this);
              alert("click on " + i)
            })

Upvotes: 1

Related Questions