D3 trasforma la scala e traduci

Question

Ho cercato di capire come funziona la trasformazione in D3 ma penso di non averlo capito.

La scala modifica la dimensione dell'oggetto SVG? significato se do un numero grande la dimensione dell'oggetto sembrerà più grande? La traslazione sposta l'oggetto da una posizione a un'altra? L'ho provato ma non ha funzionato come pensavo.

Potresti spiegarmi come dovrebbe funzionare?

Answer 1

Le trasformazioni sono trasformazioni SVG (per i dettagli, dare un'occhiata allo standard). Fondamentalmente, ridimensiona e traduci applica le rispettive trasformazioni al sistema di coordinate, che dovrebbe funzionare come previsto nella maggior parte dei casi. Puoi applicare più di una trasformazione (ad esempio, prima scala e poi tradurre) e quindi il risultato potrebbe non essere quello che ti aspetti.

Quando si lavora con le trasformazioni, tenere presente che trasformano il sistema di coordinate. In linea di principio, ciò che dici è vero: se applichi una scala> 1 a un oggetto, apparirà più grande e una traslazione lo sposterà in una posizione diversa rispetto agli altri oggetti.

Answer 2

mi rendo conto questa domanda è piuttosto vecchio, ma ha voluto condividere una rapida demo del gruppo trasforma, percorsi/forme, e posizionamento relativo, per chiunque altro che ha trovato la loro strada qui in cerca di maggiori informazioni:

http://bl.ocks.org/dustinlarimer/6050773

Answer 3

Scott Murray has a great explanation. Per esempio, per il frammento di codice:

svg.append("g") 
    .attr("class", "axis") 
    .attr("transform", "translate(" + x + "," + y + ")") 
    .call(xAxis); 

Spiega utilizzando il seguente:

Nota che usiamo attr() per applicare trasformare come attributo di g. Le trasformazioni SVG sono piuttosto potenti e possono accettare diversi tipi di definizioni di trasformazione, comprese le scale e le rotazioni. Ma siamo mantenendolo semplice qui con solo una trasformazione di traduzione, che semplicemente spinge l'intero gruppo g su e giù di una certa quantità.

Le trasformate di traduzione sono specificate con la sintassi semplice di translate (x, y), dove x e y sono, ovviamente, il numero di orizzontale e i pixel verticali con cui tradurre l'elemento.