3

我可以在 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};
  }
4

1 回答 1

8

我尝试使用您的数据结构等，但清理所有内容的时间太长了。这是我分叉并添加了 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);
    });
于 2014-01-27T22:05:36.120 回答