Question

当SVG的大小不足以显示所有元素时，尝试在SVG中添加滚动条，但不成功。在这种情况下，尝试显示所有15个矩形，但是只能达到SVG画布的大小。添加＆＃34;溢出＆＃34;对css没有帮助。任何建议如何启用垂直滚动条？

<!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>

Answer 1

基本上只需要在svg元素上添加div元素并使其大于svg el。

<!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>

答案来自：https://stackoverflow.com/a/11449016/2838794

使用D3在SVG元素中滚动条

1 个答案: