CODEWITHSUNDEEP
svgd3.js
user1698555
user1698555

Reputation: 77

Vertical scroll bar in d3

I'm trying to make a page using d3 such that the top half of the page can overfill and might need a scroll bar, but the bottom half does not. Would I need two separate svg elements to accomplish this? If so do I need to use css properties to get the scrollbar to appear. I've tried looking up similar questions on stackoverflow but they require the use of jQuery which I'm trying to avoid if possible.

So here's an example of what I'm trying to do:

http://jsfiddle.net/agANT/3/

In this I draw the green rectangle with a height 300px so it extends off the first svg, but no scroll bar appears. 

var svg = d3.select("body")
         .append("svg")
         .attr("width", 400)
         .attr("height", 200);

var svg2 = d3.select("body")
          .append("svg")
          .attr("width", 400)
          .attr("height", 200);

svg.append("rect")
    .attr("x", 0)
    .attr("y", 0)
    .attr("width", 400)
    .attr("height", 300)
    .attr("fill", "green");

svg2.append("rect")
    .attr("x", 0)
    .attr("y", 0)
    .attr("width", 400)
    .attr("height", 200)
    .attr("fill", "gray");

Thanks!

Upvotes: 0

Views: 2507

Answers (1)

Lars Kotthoff
Lars Kotthoff

Reputation: 109232

You would need two separate SVGs to accomplish this. You don't need to use any CSS, all you should need to do is set the width of the top SVG appropriately.

Upvotes: 2

Related Questions