Geek Answers Handbook

How to make graphs in dc.js scrollable within a fixed div size?

I make some graphs using dc.js and I draw some manufacturers in a line chart against counting them. when the manufacturer increases the number, the line width becomes very small and difficult to distinguish. I tried using overflow: scrolling in css, but it also scrolls the scale using the graph.

+7
crossfilter
source share
1 answer

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 at the same level in my directory.

+4
source share

More articles:


All Articles