SVG Element Not Receiving Onclick In Chrome

I am writing a javascript application for Chrome Version 66.0.3359.139 (and maybe other versions eventually). I am trying to make SVG elements that are clickable. I.e., their oncli

Solution 1:

Why don’t you try a parent div for that svg element? It should work.

Cheer,

Solution 2:

@kaiido is correct the issue here is browser related as the original code posted functions as expected in modern browsers.

Suggest OP look at canIuse do identify what their current browser supports when it comes to svg

---

Leaving my incorrect(for this question) and ultimately unnecessary d3.js example here as proof that I am willing to admit it when I am wrong and totally misread a question.

let myCircles = [
   { "x_axis": 30, "y_axis": 30, "radius": 20, "color" : "green" },
   { "x_axis": 70, "y_axis": 70, "radius": 20, "color" : "purple"},
   { "x_axis": 110, "y_axis": 100, "radius": 20, "color" : "red"}];



function onresize()
{
    clear();
   let circles = d3.select("svg")
     .selectAll("circle")
     .data(myCircles).enter()
     .append("circle");

   let attributes = circles
     .attr("cx", function (d) { return d.x_axis; })
     .attr("cy", function (d) { return d.y_axis; })
     .attr("r", function (d) { return d.radius; })
     .attr("id", function(d, i){ return 'c' + i; })  
     .attr('onclick',function(d, i){ return 'c' + i; })   
     .style("fill", function(d) { return d.color; });  
}

onresize()

---

Edit for clarity

It could be said that this is a duplicate of D3: How delete shape on click event?

However I would argue that the upvoted answer iterates the item name in a non d3 canonical way.

A callback in an attribute is the where the first input is the "data" and the second is the positional index is more faithful to the design of d3 than to use an externally declared variable to set it. .attr('onclick',function(d, i){ return 'c' + i; })