Ich versuche, meiner Baumkarte in D3 v4 Zoom-Verhalten basierend auf diesen Beispielen hinzuzufügen: 1 und 2 . Es wurde mit HTML-Elementen anstelle von SVG erstellt und ich habe es reaktionsfähig gemacht, indem ich prozentuale anstelle von Pixeleinheiten verwendet habe.
Es funktioniert bisher sehr gut, aber jetzt möchte ich mit einem Klick in einzelne Zellen hineinzoomen, bis das letzte Kind erreicht ist. Dann würde der Klick zurück zur Wurzel des Baumes gehen.
Hier ist mein bisheriger Code: Ссылка
Ich kämpfe mit der Zoom-Funktion, die in V4 funktioniert und es ist überall:
%Vor%Wie aktualisiere und übertrage ich Elemente mit D3 v4?
Danke für Hinweise!
Ihr Problem ist nicht die Zoom-Funktion, aber die Level-1-Elemente befinden sich vor Level-2-Elementen. Wenn Sie darauf klicken, wird versucht, auf das Level-1-Element zu zoomen.
Ich denke, die einfachste Lösung wäre, eine Klasse zuzuweisen oder das Level-1-Element mit pointer-events: none zu stylen, wenn es gezoomt wird. Dies macht es unmöglich, darauf zu klicken, und wenn der Benutzer klickt, fällt es durch das Kind, das dann den Zoom aktiviert.
Achten Sie darauf, die Klasse oder den Stil zu entfernen, wenn Sie den Baum zurücksetzen!
pointer-events wird in allen gängigen Browsern (Chrome, FF, IE11 +) mit Ausnahme von Opera Mini unterstützt. Siehe Browserkompatibilität auf caniuse.com . Wenn Sie IE unter 11 oder Opera Mini unterstützen müssen, können Sie z-index bearbeiten oder das übergeordnete Element ausblenden.
Im Wesentlichen blockiert der Elternteil die Auswahl der Kinder. Wenn Sie das also lösen, sollten Sie gut sein!
Tags und Links javascript d3.js treemap