Zoomstufe von d3 SVG-Leinwand ändern?

Ich habe a test site, wo ich ein d3-based force-directed network graph aus meinen eigenen Daten aufbaue.Zoomstufe von d3 SVG-Leinwand ändern?

Wenn ich ungefähr fünf oder sechs Gene auswähle, fangen die Knoten in meinem Graph an, sich außerhalb der Leinwand zu bewegen.

Welche Teile der d3-API muss ich aufrufen, um die Zoomstufe zu steuern, damit die Knoten nicht vom Rand der Zeichenfläche verschwinden?

Wenn verfügbar, würde ich definitiv alle Code-Schnipsel zu schätzen wissen, die das Konzept kurz erklären, außer die Implementierung ist ziemlich einfach. Danke für deinen Rat.

Quelle

2012-04-04 Alex Reynolds

möglich Duplikat [Gibt es eine Möglichkeit in ein Diagramm Layout zu vergrößern D3 erfolgt mit?] (Http: // Stackoverflow .com/questions/7871425/is-there-a-way-to-zoomen-in-a-graph-layout-done-using-d3) –

D3 ermöglicht die Verwendung von Zoom und es ist ziemlich einfach zu implementieren. Sie müssen Ihr Diagramm nur in ein "g" -Element einfügen, das ich "Ansichtsfenster" nenne. Dann werden Sie vom gewählten Zoom-Ereignis des svg Element zuordnen:

svg.call(d3.behavior.zoom().on("zoom", redraw))

folgende Funktion:

function redraw() { 
    d3.select("#viewport").attr("transform", 
     "translate(" + d3.event.translate + ")" 
     + " scale(" + d3.event.scale + ")"); 
}

Quelle

2012-04-04 21:36:12 txominpelu

var x, y, k; 
      if (d && centered !== d) { 
       var centroid = path.centroid(d); 
       x = centroid[0]; 
       y = centroid[1]; 
       k = 4; 
       centered = d; 
      } else { 
       x = w/2; 
       y = h/2; 
       k = 1; 
       centered = null; 
      }

schreiben Sie den folgenden Code in Zoom-Funktion svg.attr ("transformieren" , translate ("+ w/2 +", "+ h/2 +") Skalierung ("+ k +") translate ("+ -x +", "+ -y +") ");

für absolute Skala Sie cann Verwendung dieser Code dies für Karten hilfreich sein Zoomen und Schwenken

Quelle

2014-09-05 11:00:54 gopesh

Zoomstufe von d3 SVG-Leinwand ändern?

Antwort

Verwandte Themen