d3.js – 如何在固定维度div中滚动dc.js中的图形？

我一直在使用dc.js制作一些图表,我正在绘制一些行图表中的制造商.当制造商数量增加时,行宽变得非常小并且难以区分.
我尝试使用overflow：在css中滚动,但它也用图形滚动比例.

解决方法

有一种方法可以做到这一点.我有4个文件,index.html,iframe.html,iframe.css和iframe.js.这是我的设置.在index.html我有：

<html>
  <head>
    <title>Example</title>
    <Meta charset="utf-8">
 
    <script type="text/javascript" src="d3.v3.min.js"></script>
    <script type="text/javascript" src="crossfilter.js"></script>
    <script type="text/javascript" src="dc.js"></script>
    <script type="text/javascript" src="jquery.js"></script>
    <link type="text/css" rel="stylesheet" href="dc.css">
    <link type="text/css" rel="stylesheet" href="iframe.css">
  </head>
  <body>
    <iframe class="iframe" src="iframe.html"></iframe>
    <script type="text/javascript" src="iframe.js"></script>
  </body>
</html>

在iframe.html我有：

<!DOCTYPE html>
<html>
  <head>
    <script type="text/javascript" src="d3.v3.min.js"></script>
    <script type="text/javascript" src="crossfilter.js"></script>
    <script type="text/javascript" src="dc.js"></script>
    <script type="text/javascript" src="jquery.js"></script>
    <link type="text/css" rel="stylesheet" href="dc.css">
  </head>
  <body>
    <div id="rowChart"></div>
    <script type="text/javascript" src="iframe.js"></script>
  </body>
</html>

在iframe.css我有：

.iframe {
  width: 800px;
  height: 200px;
  border: none;
}

在iframe.js我有：

var data = [];
 
for (var i = 1; i < 10; i++) {
  data.push({
    val: i
  });
}
 
var ndx = crossfilter(data);
 
var dim = ndx.dimension(function(d) {
  return d.val;
});
 
var group = dim.group().reduceSum(function(d) {
  return d.val;
});
 
rowChart = dc.rowChart("#rowChart");
 
rowChart.width(800)
    .height(400)
    .margins({top: 10,right: 40,bottom: 30,left: 40})
    .dimension(dim)
    .group(group)
    .elasticX(true)
    .gap(1)
    .x(d3.scale.linear().domain([-1,10]))
    .transitionDuration(700);
 
dc.renderAll();

在此设置中,我在目录中的所有4个文件位于同一级别.

d3.js – 如何在固定维度div中滚动dc.js中的图形？

解决方法

猜你在找的JavaScript相关文章