如何使图形在dc.js可滚动固定维度div？ [英] How to make graphs in dc.js scrollable within a fixed dimension div?
问题描述
我一直在使用dc.js制作一些图表，我在一个行图中对照他们的计数绘制一些制造商。当制造商数量增加时，行宽变得真的很小，很难区分。
我试图使用overflow：在css中滚动，但它也滚动缩放与图形。
一种方法来做到这一点。我有4个文件，index.html，iframe.html，iframe.css和iframe.js。这是我的设置。在 index.html 中，我有：
< html&
< head>
< title>示例< / title>
< meta charset =utf-8>
< script type =text / javascriptsrc =d3.v3.min.js>< / script>
< script type =text / javascriptsrc =crossfilter.js>< / script>
< script type =text / javascriptsrc =dc.js>< / script>
< script type =text / javascriptsrc =jquery.js>< / script>
< link type =text / css =stylesheethref =dc.css>
< link type =text / css =stylesheethref =iframe.css>
< / head>
< body>
< iframe class =iframesrc =iframe.html>< / iframe>
< script type =text / javascriptsrc =iframe.js>< / script>
< / body>
< / html> iframe.html 中的
我有：
<！DOCTYPE html>
< html>
< head>
< script type =text / javascriptsrc =d3.v3.min.js>< / script>
< script type =text / javascriptsrc =crossfilter.js>< / script>
< script type =text / javascriptsrc =dc.js>< / script>
< script type =text / javascriptsrc =jquery.js>< / script>
< link type =text / css =stylesheethref =dc.css>
< / head>
< body>
< div id =rowChart>< / div>
< script type =text / javascriptsrc =iframe.js>< / script>
< / body>
< / html> iframe.css 中的
我有：
.iframe {
width：800px;
height：200px;
border：none; iframe.js 中的 b
$ bvar 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 （[-1，10]））
.transitionDuration（700）;
dc.renderAll（）;
在此设置中，我的目录中有同一级别的所有4个文件。
I have been making some graphs using dc.js and i am plotting some manufacturers in a row-chart against their count. when manufacturer increase in number the row width becomes really small and hard to distinguish. I tried to use overflow : scroll in css but it also scrolls the scale with the graph.
解决方案There is a way to do this. I have 4 files, index.html, iframe.html, iframe.css, and iframe.js. Here is my setup. In index.html I had:
<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>in iframe.html I had:
<!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>in iframe.css I had:
.iframe { width: 800px; height: 200px; border: none; }in iframe.js I had:
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();In this setup I had all 4 files in the same level in my directory.
这篇关于如何使图形在dc.js可滚动固定维度div？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
