D3 Kraft Layout: Pfanne auf ziehen (Zoom) glatter

Question

Ich habe eine statische 3D-Kraft-Layout-Grafik, die ziemlich groß (manchmal Teile davon sind abgeschnitten), so dass ich möchte den Benutzer zu lassen Verschieben Sie den gesamten Graphen durch Ziehen. Ich glaube nicht, dass ich einzelne Knoten schleifen muss, ich habe das Gefühl, dass das nur verwirrend sein wird, aber ich möchte es ermöglichen, die Teile des Graphen zu zeigen, die von den Svg-Grenzen abgeschnitten sind.

ich ein minimales Beispiel bei http://bl.ocks.org/3811811 habe die verwendet

visF.append("rect") 
.attr("class", "background") 
.attr("width", width) 
.attr("height", height) 
.call(d3.behavior.zoom().on("zoom", redrawVisF)); 
function redrawVisF() { 
    visF.attr("transform","translate(" + d3.event.translate + ")" + " scale(" + d3.event.scale + ")"); 
} 

das Panorama zu implementieren, aber ich finde es wirklich überhaupt auf den Punkt „skittery“ und nicht sehr glatt, wo ich vermute, mich es wird Leute davon abhalten, die Ziehfunktion überhaupt auszuprobieren. Hat jemand eine Ahnung, warum das passiert und/oder eine Idee, wie es zu beheben ist?

Answer 1

Das Problem ist, dass d3.behavior.zoom die aktuelle Mausposition relativ zu dem Containerelement des angeklickten Elements abruft und Sie das Containerelement verschieben! Die relative Position ändert sich also ständig, daher der Jitter-Effekt, den Sie sehen.

Sie möchten wahrscheinlich den Hintergrund <rect> verschieben, so dass es ein direktes Kind des Elements <svg> ist. Dies führt zu zwei Dingen:

1. Die Position wird nun relativ zum <svg> Container sein, der sich nicht bewegt.
2. Derzeit bewegen Sie die <rect> beim Zoomen oder Schwenken, sodass sich der zoombare Bereich ändert und einige Teile des Ansichtsfensters nicht mehr zoombar sind. Mit dem Hintergrund <rect> an der gleichen Stelle behebt dieses Problem auch.