Событие клика для круга d3.js

Question

Я умею рисовать пузырьковую диаграмму в d3.js. Также, когда я нажимаю на любой круг, я получаю предупреждающие сообщения. Но когда я щелкаю за пределами области круга, я все еще получаю предупреждающие сообщения. Я не хочу никакой кликабельной области за пределами моего круга. Пожалуйста помоги. Смотрите мой пример здесь.

Data.json

{
"chartData": [
    {
        "name": "Type1",
        "size": 12,
        "color": "red"
    },
    {
        "name": "Type2",
        "size": 28,
        "color": "yellow"
    },
    {
        "name": "Type3",
        "size": 36,
        "color": "blue"
    },
    {
        "name": "Type4",
        "size": 24,
        "color": "green"
    }
]

}

var diameter = 450,
    format = d3.format(",d"), 
    color = d3.scale.category20c();

var bubble = d3.layout.pack()
    .sort(null)
    .size([diameter, diameter]);

var svg = d3.select('#bubbleId').append("svg")
    .attr("width", diameter)
    .attr("height", diameter)
    .attr("class", "bubble");

d3.json("data.json", function(error, root) {

    var node = svg.selectAll(".node")
        .data(bubble.nodes(classes(root))
        .filter(function(d) { return !d.children; }))
       .enter()
        .append("g")
        .attr("class", "node")
        .attr("transform", function(d) {
            return "translate(" + d.x + "," + d.y + ")";
        }
);


node.append("circle")
   .attr("r", function(d) { return d.value; })
   .style("fill", function(d) { return d.color;});

node.on("click", function(d) {
    alert("on click" + d.className); 
});

function classes(root) {
    var classes = [];
    function recurse(name, node) {
        if (node.chartData) {
            node.chartData.forEach(function(child) {
                recurse(node.name, child);
            }); 
        } 
        else{
            classes.push({ packageName: name,
                           className: node.name,
                           value: node.size,
                           color: node.color,
                           totalCount:node.totalCount});
        } 
    } 
    recurse(null, root); 
    return {children: classes};
  }

Answer 1

Я пытался поиграть с вашей структурой данных и т. Д., Но это заняло слишком много времени, чтобы все очистить. Вот скрипка, которую я разветвил и добавил событие onclick, которое послужит вам примером. Это работает как предсказано. Вы можете изучить его и применить к своим данным.

Вот фрагмент, который я изменил из оригинальной вилки:

node.append("circle")
    .attr("r", function(d) { return d.r; })
    .style("fill", function(d) { return fill(d.packageName); })
    .on("click", function(d) {
        alert("on click" + d.className);
    });