javascript - graficas - graficos estadisticos bootstrap

Gráfico circular receptivo con NVD3

Question

Estoy trabajando en un ejemplo simple de un gráfico circular usando NVD3. Se representa correctamente pero no responde. Traté de seguir esta respuesta para que fuera receptiva, pero no lo logré.

Hice un violín . De hecho, es receptivo, pero no puedo ajustar el gráfico en el contenedor. Mi código js:

nv.addGraph(function() {
  var chart = nv.models.pieChart()
  .x(function(d) { return d.label })
  .y(function(d) { return d.value })
  .showLabels(true);

  var $container = $(''#chart''),
      width = $container.width(),
      height = $container.height();

  d3.select("#chart svg")
    .attr("width", ''100%'')
    .attr("height", ''100%'')
    .attr(''viewBox'',''0 0 ''+Math.min(width,height)+'' ''+Math.min(width,height))
    .attr(''preserveAspectRatio'',''xMinYMin'')
    .attr("transform", "translate(" + Math.min(width,height) / 2 + "," + Math.min(width,height) / 2 + ")")
    .datum(exampleData)
    .transition().duration(350)
    .call(chart);

  return chart;
});

var exampleData = [
  { 
    "label": "One",
    "value" : 29.765957771107
  } , 
  { 
    "label": "Two",
    "value" : 0
  } , 
  { 
    "label": "Three",
    "value" : 32.807804682612
  } , 
  { 
    "label": "Four",
    "value" : 196.45946739256
  } , 
  { 
    "label": "Five",
    "value" : 0.19434030906893
  } , 
  { 
    "label": "Six",
    "value" : 98.079782601442
  } , 
  { 
    "label": "Seven",
    "value" : 13.925743130903
  } , 
  { 
    "label": "Eight",
    "value" : 5.1387322875705
  }
];

¿Cómo puedo hacer que la tabla se ajuste correctamente en un div del tamaño porcentual?

Answer 1

Hecho. El atributo viewBox enumera el ancho mínimo, la altura mínima, el ancho y la altura del gráfico, en ese orden. Entonces, cambié los dos últimos valores para usar ancho y alto en su lugar. Y ponga una propiedad de altura mínima en el CSS para adaptarlo al tamaño cambiante de la ventana.

.attr(''viewBox'',''0 0 ''+width+'' ''+height)

Y el violín .

Otra opción es usar el método update () de nv:

nv.addGraph(function() {
  var chart = nv.models.pieChart()
  .x(function(d) { return d.label })
  .y(function(d) { return d.value })
  .showLabels(true);

  var $container = $(''#chart''),
      width = $container.width(),
      height = $container.height();

  d3.select("#chart svg")
    .datum(exampleData)
    .transition().duration(350)
    .call(chart);

    nv.utils.windowResize(chart.update);

  return chart;
});