nvd3控件分成2行

Question

我有标准的 nvd3 multybarchart 例子使用激活控件：

chart.showControls(true);

当屏幕宽度改变时，我看不到控件和图例，例如：

有办法解决吗？

例如将控件转换为两行，如：

尝试用 d3.select('.nv-controlsWrap').attr("transform","translate(...,...) rotate(...)");

做到这一点

但没有找到实现两行控件视图的方法。

感谢

psRU_SO原题。

Answer 1

应该很简单：

d3.select('.nv-controlsWrap .nv-series:nth-child(2)')
  .attr('transform', 'translate(0, 25)');

已更新 fiddle。

对于 "fix" 平局：

function stackControls(){
  d3.select('.nv-controlsWrap .nv-series:nth-child(2)').attr('transform', 'translate(0, 25)');
}
nv.utils.windowResize(function(){
    chart.update();
    stackControls();
});    
d3.select('.nv-controlsWrap').on('click', stackControls);
d3.select('.nv-legendWrap').on('click', stackControls);    
stackControls();

已更新 fiddle。

nvd3控件分成2行

nvd3 controls into 2 line

javascript

d3.js

nvd3.js