D3.JS Treemap inkonsistentes Zoomverhalten

Ich versuche ein Menü mit einer d3.js Treemap zu erstellen. Es funktioniert meistens, aber ich habe ein paar Pannen, die ich nicht genau bestimmen kann.D3.JS Treemap inkonsistentes Zoomverhalten

Grundsätzlich manchmal mein Diagramm zoomt nicht richtig und anstatt zu sehen, die Kinder nehmen den gesamten SVG-Bereich, zeigen sie "unzoomed".

Ich vermute, dass es etwas mit dem Timing der Animation im Vergleich zu einigen Datenmanipulation zum Ausblenden/Anzeigen der verschiedenen Knoten zu tun hat, aber es nicht wirklich herausfinden kann. Eine andere Sache, von der ich dachte, dass sie das Verhalten aufmischt, bezieht sich auf die Klickereignisse, die sowohl von "Elternknoten" als auch von "Kinderknoten" registriert werden.

Ich habe ein ähnliches Beispiel Setup in JSBIN.

Also, ich frage mich, wie ich Click-Ereignisse in den Eltern/Kind-Knoten auf Zoom registrieren/aufheben konnte - wenn das sogar das Problem ist - und auch wenn es einen einfacheren oder weniger fehleranfälligen Weg zum Ändern der Knoten gab ' Sichtweite.

Jede Hilfe ist willkommen!

Quelle

2016-04-05 Joum

Ich habe das Problem nicht sehr gut verstanden. Ich klickte das Essen-Icon ein, dann "Streetfood" und dann wurde der Zoom auf die Wurzel zurückgesetzt. Ist das Verhalten, von dem du sprichst? – jprivillaso

@jprivillaso no ... Das schlechte Verhalten, über das ich spreche, tritt * manchmal * auf, wenn Sie auf ein Rechteck klicken (aber nicht auf das Symbol). – Joum

Ich denke, ich reproduziert den Fehler. Ist es, wenn Sie schnell in die Felder klicken, dann erscheinen alle Knoten auf der gleichen Ebene? – jprivillaso

Nun, das könnte ein wenig unorthodox sein, aber ich habe einen Weg gefunden, dies zu überwinden.

Im Grunde, anstatt zu versuchen, mit Ereignisregistrierung/Aufhebung der Registrierung rumzualbern, lief ich einfach den Zoom nur, wenn der Klick nicht vom Knoten auf der aktuellen Zoomstufe war.

Also, meine zoom Funktion, wickelte ich den Zoom in einer if Scheckbearbeitung:

function zoom(d) { 

    if(node!=d){ 

    // the rest remains the same 

    } 
}

So oder so, ich denke immer noch, dass dies aufgrund des Quellenelementes geschieht, wo die Click-Ereignisse kommen wurden Überlappung im SVG-Bereich - einfach ausgedrückt, das Klick-Ereignis wurde von mehreren überlappenden Elementen ausgelöst, die als erstes (oberstes) in der SVG-Baumreihenfolge versehentlich ausgelöst wurden.

Here ist eine funktionierende Version.

Hoffe das hilft jemand anderem!

EDIT: Diese Lösung ist jedoch nicht perfekt. Jetzt macht der Klick manchmal gar nichts - aber es ist besser, als die Benutzeroberfläche zu borken. Wenn jemand andere Ideen hat, sind sie willkommen.

Quelle

2016-04-05 15:32:57 Joum

D3.JS Treemap inkonsistentes Zoomverhalten

Antwort

Verwandte Themen