如何使dc.js中的图形在固定维度div内滚动?

我一直在使用dc.js制作一些图表,并且我正在对一些制造商的图表进行绘图。 当制造商数量增加时,行宽变得非常小并且难以区分。 我试图使用溢出:在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个文件在同一级别。

链接地址: http://www.djcxy.com/p/82629.html

上一篇: How to make graphs in dc.js scrollable within a fixed dimension div?

下一篇: Shiny plotGoogleMaps Internet Explorer vs Chrome