Scroll bar in SVG element with D3

Question

trying to add scrollbar in SVG when the size of the SVG is not enough to display all elements, however not successfully. In this case trying to display all 15 rectangles, however can reach only up to the size of SVG canvas. Adding "overflow" to css didn't help. Any advices how to enable vertical scroll bar?

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>D3 World Map</title>
    <script src="https://d3js.org/d3.v4.min.js"></script>
    <style>
        #halfpage{
            background: "white";
            overflow-y: scroll;
        }
    </style>
  </head>
  <body>
  <script type="text/javascript">

  var elements = [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15];

  var svgContainer = d3.select("body").append("svg")
    .attr("width", 1200)
    .attr("height", 700)
    .attr("id", "halfpage");

    svgContainer.selectAll("rects1")
                .data(elements)
                .enter()
                .append("rect")
                .attr("width", 50)
                .attr("height", 20)
                .attr("x", 475)
                .attr("y", function(d, i){
                    return 100 * i;
                })
                .style("fill", "brown");

    </script>
  </body>
</html>

score 7 · Accepted Answer · edited Jul 03 '19 at 04:49

Basically I needed just to add a div element on top of the svg element and make the div smaller than the svg.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>D3 World Map</title>
    <script src="https://d3js.org/d3.v4.min.js"></script>
    <style>
        div#halfpage{
        height: 900px;
        width: 800px;
        border:2px solid #000;
        overflow-y: auto;
        }
        svg#sky {
          height: 1000px;
          width: 1100px;
          border:1px dotted #ccc;
          background-color: #ccc;
       }
    </style>
  </head>
  <body>
  <script type="text/javascript">

  var elements = [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15];

  var container = d3.select("body").append("div")
    .attr("id", "halfpage");

    var svgContainer = container.append('svg')
        //.attr('height', 100)
        //.attr('width', 100)
        .attr('id', 'sky');

    svgContainer.selectAll("rects1")
                .data(elements)
                .enter()
                .append("rect")
                .attr("width", 50)
                .attr("height", 20)
                .attr("x", 475)
                .attr("y", function(d, i){
                    return 100 * i;
                })
                .style("fill", "brown");

    </script>
  </body>

Answer comes from here: https://stackoverflow.com/a/11449016/2838794

Scroll bar in SVG element with D3

1 Answers1