Tengo un gráfico que usa el diseño de fuerza, pero tiene un ancho fijow y alturah:

var svg = d3.select("#viz").append("svg")
            .attr("id", "playgraph")
            .attr("width", w)
            .attr("height", h)

var force = d3.layout.force()
              .nodes(nodes)
              .links(links)
              .charge(-1600)
              .linkDistance(45)
              .size([w, h]); 

lo que da como resultado un gráfico svg que no se reduce o disminuye a pesar de los cambios en el tamaño de la pantalla o la ventana del navegador. Con el fin de que sea sensible (es decir, se redimensiona automáticamente), intenté usarviewBox ypreserveAspectRatio atributos:

var svg = d3.select("#viz").append("svg")
            .attr("id", "playgraph")
            .attr("width", w)
            .attr("height", h)
            .attr("viewBox", "0, 0, 600, 400")
            .attr("preserveAspectRatio", "xMidYMid meet");

Desafortunadamente, esto no funcionó ya que nada sucede cuando ajuste el tamaño de la ventana del navegador. Me pregunto si el.size([w, h]) La fuerza de la gráfica tiene algo que ver con esto.

Por favor arroje algo de luz sobre cómo usarviewBox ypreserveAspectRatio Atributos con gráficos de fuerza de diseño.