Escala de transformación D3 y traducir

Question

Intenté entender cómo funciona la transformación en D3, pero creo que no la obtuve.

¿La báscula cambia el tamaño del objeto SVG? lo que significa que si le doy un número grande, ¿el tamaño del objeto se verá más grande? ¿El traslado mueve el objeto de un lugar a otro? Lo intenté pero no funcionó como pensé.

¿Podría explicarme cómo debería funcionar?

Answer 1

Las transformaciones son transformaciones SVG (para obtener más información, consulte el standard). Básicamente, escalar y traducir aplica las respectivas transformaciones al sistema de coordenadas, que debería funcionar como se espera en la mayoría de los casos. Sin embargo, puede aplicar más de una transformación (por ejemplo, primera escala y luego traducir) y luego el resultado podría no ser el esperado.

Al trabajar con las transformaciones, tenga en cuenta que transforman el sistema de coordenadas. En principio, lo que dices es cierto: si aplicas una escala> 1 a un objeto, se verá más grande y una traducción lo moverá a una posición diferente en relación con los otros objetos.

Answer 2

que dan cuenta de esta pregunta es bastante antiguo, pero quería compartir una demostración rápida de grupo transforma, caminos/formas, y el posicionamiento relativo, para cualquier otra persona que encontró su camino aquí en busca de más información:

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

Answer 3

Scott Murray has a great explanation. Por ejemplo, para el fragmento de código:

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

explica utilizando la siguiente:

en cuenta que utilizamos attr() para aplicar la transformada como un atributo de g. Las transformaciones de SVG son bastante poderosas y pueden aceptar varios tipos distintos de de definiciones de transformación, incluidas escalas y rotaciones. Pero estamos manteniéndolo simple aquí con solo una transformación de traducción, que simplemente empuja todo el grupo g hacia arriba y hacia abajo en cierta cantidad.

transformadas de traducciones se especifican con el fácil sintaxis de traducir (x, y), donde x e y son, obviamente, el número de píxeles horizontales y verticales por los que pueda traducir el elemento.