Ich arbeite an [diesem] [1] d3-Projekt. Im Grunde versuche ich einen SQL-ähnlichen Abfrage-Generator zu erstellen. Ich kann Boxen in den Zeichenbereich legen & amp; andere Bediener in der Box. Dann sollte ich sie alle verbinden können. Ich versuche 2 Bilder zu übersetzen, die in Gruppen verschachtelt sind. Ich möchte die kleinen Gegenstände in der großen Kiste bewegen. Ich kann die große Box und kleine Operatoren separat transformieren. Problem passiert, wenn ich versuche, die kleinen Operatoren zuerst zu bewegen. Ich möchte die kleinen Operatoren bewegen, dann große Kisten. währenddessen möchte ich die relative Position von kleinen Betreibern und großer Kiste gleich halten. Aber wenn ich versuche, die große Kiste zu bewegen, nachdem ich eine der kleinen Kisten bewegt habe, setzt sie ihre Position zurück. Hier ist eine Demo meiner Arbeit in jsfiddle
%Vor%
%Vor%
PS: Ich verbinde zwei Elemente, indem ich die Kreise ziehe und in einen anderen Kreis drücke.
Kann jemand auf meinen Fehler hinweisen?
Aus meiner Erfahrung bei der Entwicklung von visuellen Editoren kann ich sagen, dass relative Positionen (wie x, y in Operator) als Daten verwaltet werden können und auch so verwaltet werden sollen.
Versuchen Sie, diese Daten (und nicht direkt die x, y-Attribute des svg-Elements) zu ändern und die Daten auf d3js-Art zu binden. Es wird viel idiomatischer und schneller sein.
PS: Ich weiß über die Trennung von Modell und Ansicht, und ich kenne die schlechte Seite des Speicherns visueller Eigenschaften entlang des Modells, aber wenn es nur eine Ansicht für dieses Modell sein soll, ist es sicher der beste Ansatz.
Tags und Links javascript svg d3.js