如果没有，则需要在 nvd3 multiBarHorizontalChart 中进行垂直滚动。酒吧增加

Question

我正在使用 NVD3 获取 multiBarHorizontalChart。我需要用更多的条形图（大约 100 个）来绘制相同的图。随着数量的增加条，条尺寸减小并调整到容器中。但是我需要条形大小是静态的并且需要条形和 Y 轴的内部滚动

Answer 1

你手动有两个div，通过css,

调整

 <div class="outerdiv">
      <div class="innerdiv">
        <nvd3 options="options" data="data" class="inner"></nvd3>
      </div>
  </div>

DEMO

Answer 2

我做到了！有 2 个 divs：一个用于图表、y 轴和图例，另一个专门用于 x 轴，从 nvd3 的 svg 中删除了 X 轴并将其附加到分隔 div。添加滚动到 div 保存 nvd3 的 svg。

d3.select("#forXaxis").append(function() {
    var xaxis=  d3.selectAll('.nvd3').selectAll('.nv-y').attr('transform', 'translate(10,0)').remove();
    console.log("Appending "+xaxis[0][0]);
    return xaxis[0][0];
   });

.chart-container{
   width:80%;
   height:500px;
  }

 <div class="chart-container">
  <div class="charter" style = "height:300px; width:500px; border:1px solid red;overflow-y:auto;"> 
   <nvd3 options="options" data="data"></nvd3>
  </div> 
  <div class= "for-xaxis"><svg id = "forXaxis" width="100%" height="80px"></svg></div>
 </div>

如果没有，则需要在 nvd3 multiBarHorizontalChart 中进行垂直滚动。酒吧增加

Need a vertical scroll in nvd3 multiBarHorizontalChart if no. of bars increases

javascript

angularjs

d3.js

svg

nvd3.js

如果没有，则需要在 nvd3 multiBarHorizo​​ntalChart 中进行垂直滚动。酒吧增加

Need a vertical scroll in nvd3 multiBarHorizontalChart if no. of bars increases

javascript

angularjs

d3.js

svg

nvd3.js

如果没有，则需要在 nvd3 multiBarHorizontalChart 中进行垂直滚动。酒吧增加