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.
How to make graphs in dc.js scrollable within a fixed dimension div?
Asked Answered
Not sure why this was downvoted. It's an interesting question. Since SVG doesn't natively support scrolling, you'd have to do some hacking. Here is a related question: #4721127 . Another idea is to pull the axis out of the SVG and put it in another element, and then use overflow on the original div. –
Dennison
@ankit One way is to use the css scroller, couple that with bar labels. That would ease some of the pain i guess. –
Kronstadt
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.
© 2022 - 2024 — McMap. All rights reserved.