1

I am trying to make my SVG more responsive to different Windows and I did not see much in the documentation for it that works for me. How do I make my design more responsive?

This is how my HTML structured:

<body>
    <div id="toggle"></div>
    <div id="zoomArea">
        <button type="button" class="btn btn-secondary" id="reset">Reset</button>
    </div>
    <div id="container">
        <div id="tree"></div>
    </div>
    <script type="text/javascript" src="script.js"></script>
</body>

Here is my script:

let svg = d3.select("#tree")
.append("svg")
.attr("width", width + margin.right + margin.left)
.attr("height", height + margin.top + margin.bottom + additionalHeight)
let g = svg.append("g")
.attr("transform", "translate(" + margin.right + "," + margin.top + ")")

SVG will be appended to the tree div and serve as the container for my graph.

I have used this as a resource, more specifically, Adam's answer: Resize svg when window is resized in d3.js but it didn't work for me. The SVG did not resize at all.

Darnold14
  • 29
  • 7
  • Are you sure you are using the same version of d3 as was used in the answer you linked to? – Pytth Jan 03 '19 at 17:51
  • I am using D3 v4. – Darnold14 Jan 03 '19 at 18:04
  • Seeing as to how the answer you linked to is from 5+ years ago, I think the code there is for D3 V3. Things changed quite a bit between those two versions. – Pytth Jan 03 '19 at 18:05
  • Ah ok. If I use this resource: https://bl.ocks.org/curran/3a68b0c81991e2e94b19, I get a smaller version of my graph flashing but disappearing instantly with my original there, effectively not keeping the resized onscreen. – Darnold14 Jan 03 '19 at 18:41

1 Answers1

0

You can use the 'viewBox' attribute in your svg tag to make the svg responsive, it is the scalable in Scalable Vector Graphic. Setting the 'viewBox' attribute to the same height and width as the svg will ensure that all of the svg is visable.

<svg viewBox='0 0 400 600' width='600' height='400'>

There is a useful article about 'viewBox' and other svg attributes here if you want to know more. svg-viewBox

BeccaH
  • 1
  • 1
  • 2