我一直在使用 dc.js 制作一些图表，我正在根据他们的数量在行图中绘制一些制造商。当制造商数量增加时，行宽变得非常小且难以区分。
我尝试使用 overflow : scroll in 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 - 如何使 dc.js 中的图形可在固定尺寸 div 内滚动？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/27124156/