7

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.

Ankit
  • 394
  • 1
  • 4
  • 16
  • 1
    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: http://stackoverflow.com/questions/4720627/how-to-gets-scrollbars-in-svg-for-multiple-content . 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. – Gordon Nov 25 '14 at 13:26
  • @ankit One way is to use the css scroller, couple that with bar labels. That would ease some of the pain i guess. – anmol koul Jun 02 '15 at 16:56

1 Answers1

4

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.

Ben Leitner
  • 1,532
  • 1
  • 12
  • 33