javascript - d3.js圈子包的Click事件

我可以在d3.js中绘制气泡图。另外，当我单击任意圈子时，也会收到警报消息。但是当我在圈子外单击时，仍然收到警报消息。我不希望我的圈子中有任何可点击的区域。请帮忙。在这里查看我的示例。

数据.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};
  }

最佳答案

我尝试使用您的数据结构等，但是清理所有内容花费的时间太长。这是一个fiddle I forked，并添加了onclick事件以为您提供模型。它按预期工作。您可以研究它并将其应用于您的数据。

这是我从原始 fork 更改的片段:

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);
    });

关于javascript - d3.js圈子包的Click事件，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/21391082/