如何使用 nvd3 触发调整大小事件?
How to trigger resize event using nvd3?
我现在需要了解如何在 AngularJS 的 nvd3 上触发调整大小事件。
问题是我在饼图中的标签上做了换行,当我调整 window 大小时,标签 return 恢复到原始状态(1 行)。
而且我希望它在每次触发调整大小事件时都断行。
这是我的html:
<nvd3 on-ready="ctrl.onReadyPie('id')" options='ctrl.pieChartOptions' data='ctrl.data'>
</nvd3>
函数onReadyPie
换行:
function onReadyPie(id){
var svg = d3.selectAll('#' + id + ' svg g text');
svg.each(function(){
var el = d3.select(this),
lines = el.html().split(' / ');
el.text('');
for(var i = 0; i<lines.length; i++){
var tspan = el.append('tspan').text(lines[i]);
if(i>0){
tspan.attr('x', 0).attr('dy', 15);
}
}
})
}
This is the current behavior
以下是当 window 使用 NVD3 调整大小时如何触发事件。
nv.addGraph(function() {
var chart = nv.models.multiBarChart()
// You chart properties goes here
// Detect window resize using NVD3
nv.utils.windowResize(function(){ chart.update(); });
return chart;
});
有关详细信息,请查看 NVD3 wiki。
希望对您有所帮助
我现在需要了解如何在 AngularJS 的 nvd3 上触发调整大小事件。
问题是我在饼图中的标签上做了换行,当我调整 window 大小时,标签 return 恢复到原始状态(1 行)。
而且我希望它在每次触发调整大小事件时都断行。
这是我的html:
<nvd3 on-ready="ctrl.onReadyPie('id')" options='ctrl.pieChartOptions' data='ctrl.data'>
</nvd3>
函数onReadyPie
换行:
function onReadyPie(id){
var svg = d3.selectAll('#' + id + ' svg g text');
svg.each(function(){
var el = d3.select(this),
lines = el.html().split(' / ');
el.text('');
for(var i = 0; i<lines.length; i++){
var tspan = el.append('tspan').text(lines[i]);
if(i>0){
tspan.attr('x', 0).attr('dy', 15);
}
}
})
}
This is the current behavior
以下是当 window 使用 NVD3 调整大小时如何触发事件。
nv.addGraph(function() {
var chart = nv.models.multiBarChart()
// You chart properties goes here
// Detect window resize using NVD3
nv.utils.windowResize(function(){ chart.update(); });
return chart;
});
有关详细信息,请查看 NVD3 wiki。
希望对您有所帮助