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};
}
Du musst angemeldet sein, um einen Kommentar abzugeben.
Ich habe versucht, das spielen mit der Struktur der Daten, etc. aber es war einfach zu lange dauert alles zu reinigen bis. Hier ist ein fiddle I Gabel und fügte hinzu, das onclick-Ereignis, um zu dienen als ein Modell für Sie. Es funktioniert wie vorhergesagt. Sie können es zu studieren und wenden es auf Ihre Daten.
Hier ist das snippet veränderte ich von der original-Gabel: