我正在使用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" : 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属性以该顺序列出图形的最小宽度，最小高度，宽度和高度。因此，我将最后两个值更改为使用width和height。并在CSS中放置一个min-height属性，以使其适应不断变化的窗口大小。
.attr('viewBox','0 0 '+width+' '+height)
和小提琴。
另一种选择是使用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;
});
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句