Ich arbeite an einem Blasendiagramm und ich habe an jedem der Kreise ein Click-Ereignis angehängt. Wenn Sie auf einen Kreis klicken, wird das Blasendiagramm durch ein neues Diagramm ersetzt, das eine detailliertere Information darstellt.Zugriff auf D3 SVG-Objekt innerhalb eines Klickereignisses
Hier ist ein Teil des Codes ist:
svg.selectAll("circle")
.data(dataset)
.enter()
.append("circle")
.attr("cx", function(d) {
return scaleX(d[2]);
})
.attr("cy", function(d) {
return scaleY(100 - d[1]);
})
.attr("r", function(d) {
return d[1];
})
.attr("fill", "#4eb157")
.attr("stroke", "#00c4d4")
.attr("stroke-width", function(d) {
return d[1]*(1-d[2]/100)*1.5;
})
.on("click", function()
{
svg.selectAll("circle")
.data(new_dataset)
.enter()
.append("circle")
.attr("cx", function(d) {
return scaleX(d[2]);
})
.attr("cy", function(d) {
return scaleY(100 - d[1]);
})
.attr("r", function(d) {
return d[1];
})
.attr("fill", "#4eb157")
.attr("stroke", "#00c4d4")
.attr("stroke-width", function(d) {
return d[1]*(1-d[2]/100)*1.5;
});
svg.selectAll("text")
.data(new_dataset)
.enter()
.append("text")
.text(function(d) {
return d[0];
})
.attr("x", function(d) {
return scaleX(d[2]);
})
.attr("y", function(d) {
return scaleY(100 - d[1]);
})
.attr("font-family", "sans-serif")
.attr("font-size", "11px")
.attr("fill", "red");
});
Das Problem kommt, wenn ich auf den Kreis klicken, wird das ganze Diagramm verschwindet, aber kein neues Diagramm visualisiert. Ich habe herausgefunden, dass das Svg-Objekt während der Ausführung der On-Click-Funktion seinen ursprünglichen Zustand geändert hat und insbesondere einige der Eigenschaften wie baseURI, clientHeight, clientWidth usw. nicht mehr gesetzt sind, obwohl sie ursprünglich beim Erstellen des svg verwendet wurden Objekt. Hier ist der Code, mit dem ich schaffe das svg Objekt:
var svg = d3.select("body").append("svg")
.attr("width", w)
.attr("height", h);
Meine Frage ist, warum das neue Diagramm nicht angezeigt? Liegt das an den geänderten Eigenschaften des Svg-Objekts? Was muss ich in der On-Click-Funktion ändern, damit das neue Diagramm erfolgreich visualisiert wird?
Danke!