Estoy usandoeste bonito diseño de fuerza desde Flowingdata.com para crear un diagrama de red.

Mi diagrama muestra actualmente entre 5 y 750 nodos con sus relaciones. Funciona muy bien con algunos cambios personalizados para satisfacer mis necesidades. Sin embargo una cosa no puedo ponerme a trabajar. tengo unviewBox conpreserveAspectRatio para encajar automáticamente el contenedor en el que se encuentra. Pero, dependiendo de la cantidad de nodos, siempre hay algunos nodos alrededor de los bordes (principalmente en la parte superior y en el botón) que se cortan. Y si hay muy pocos nodos, los muestra en el medio con un gran espacio vacío a su alrededor (es un contenedor grande en el que está).

¿Hay alguna forma de hacer zoom o escalar automáticamente el diseño para ajustarlo automáticamente? Así que un diseño grande se aleja un poco y un diseño pequeño. Tengo una configuración de evento de zoom, por lo que el desplazamiento y la panorámica funcionan como un encanto. ¿Pero puede hacerlo automáticamente para ajustarse a los contenidos?

El código de inicio d3.js:

        vis = d3.select(selection)
        .append("svg")
        .attr("viewBox", "0 0 " + width + " " + height )
        .attr("preserveAspectRatio", "xMidYMid meet")
        .attr("pointer-events", "all")
        .call(d3.behavior.zoom().scaleExtent([.1, 3])
                        .on("zoom", redraw)).append('g');