小编dal*_*ana的帖子

使用NVD3的响应饼图

我正在研究一个使用NVD3的饼图的简单示例.它呈现正确,但没有响应.我试着按照这个答案让它反应灵敏,但没有完全达到它.

我做了一个小提琴.实际上,它是响应性的,但我无法将图表放入容器中.我的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" …
Run Code Online (Sandbox Code Playgroud)

javascript charts responsive-design d3.js nvd3.js

5
推荐指数
1
解决办法
3017
查看次数

标签 统计

charts ×1

d3.js ×1

javascript ×1

nvd3.js ×1

responsive-design ×1