Disposizione della forza D3:rendendo la panoramica più fluida durante il trascinamento (zoom).

Question

Ho un grafico di layout della forza statica d3.js che può diventare piuttosto grande (a volte parti di esso vengono ritagliate), quindi vorrei consentire all'utente di eseguire la panoramica dell'intero grafico trascinandolo.Non penso di aver bisogno di trascinare i singoli nodi, ho la sensazione che creerà confusione, ma vorrei rendere possibile mostrare le parti del grafico che sono ritagliate dai confini SVG.

Ho un esempio minimo a http://bl.ocks.org/3811811 che utilizza

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 + ")");
}

per implementare il panning, ma lo trovo davvero "instabile" e per niente fluido, al punto che immagino che impedirà alle persone di provare la funzione di trascinamento.Qualcuno ha idea del perché ciò accada e/o un'idea su come risolverlo?

Answer 1

Il problema è che d3.behavior.zoom recupera la posizione corrente del mouse rispetto all'elemento contenitore dell'elemento cliccato e stai spostando l'elemento contenitore!Quindi la posizione relativa cambia costantemente, da qui l'effetto jitter che vedi.

Probabilmente vorrai spostare lo sfondo <rect> in modo che sia un figlio diretto di <svg> elemento.Ciò consente di ottenere due cose:

1. La posizione sarà ora relativa a <svg> contenitore, che non si muove.
2. Attualmente stai spostando il file <rect> quando si esegue lo zoom o la panoramica, l'area zoomabile cambia e alcune parti della finestra non sono più zoomabili.Avere lo sfondo <rect> nello stesso posto risolve anche questo problema.