Click-Ereignis für d3.js circle pack

Ich bin in der Lage zu zeichnen Blasendiagramm in d3.js. Auch wenn ich klickte auf jedem Kreis, ich bin immer Warnmeldungen. Aber wenn ich klickte außerhalb der Kreisfläche,ich bin noch immer Warnmeldungen. Ich will nicht anklickbaren Bereich außerhalb meines Kreises pack. Bitte helfen Sie. Siehe mein Beispiel hier.

Daten.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};
  }
InformationsquelleAutor dip | 2014-01-27
Schreibe einen Kommentar