使用 NVD3 的响应式饼图答案

【问题标题】：Responsive pie chart using NVD3使用 NVD3 的响应式饼图
【发布时间】：2016-06-08 02:15:02
【问题描述】：

我正在使用 NVD3 制作一个简单的饼图示例。它可以正确呈现，但没有响应。我尝试关注this answer 以使其具有响应性，但并没有完全做到。

我做了一个fiddle。确实，它是响应式的，但我无法将图表放入容器中。我的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
  }
];

如何使图表正确适合百分比大小的 div？

【问题讨论】：

我可以看到将viewBox属性乘以2或3，图表的大小减小了，但它也取决于div的百分比，所以它不是很有帮助。

标签： javascript d3.js charts responsive-design nvd3.js

【解决方案1】：

完成。 viewBox 属性按顺序列出了图形的最小宽度、最小高度、宽度和高度。因此，我将最后两个值更改为使用宽度和高度。并在 css 中放置一个 min-height 属性，以使其适应不断变化的窗口大小。

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

还有fiddle。

另一种选择是使用 nv 的 update() 方法：

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;
});

【讨论】：