bubble view : responsive (adapt to size of window)

resources/views/app/bubble.blade.php

@@ -3,17 +3,26 @@
 @section('content')
 
 <h1 class="text-center">{{ $label }}</h1>
-<svg width="1200" height="800"></svg>
+<div style="width: 100%; height: 800px" id="svg-container">
+</div>
 
-<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/7.1.1/d3.min.js" integrity="sha512-COTaPOlz12cG4fSfcBsxZsjauBAyldqp+8FQUM/dZHm+ts/jR4AFoJhCqxy8K10Jrf3pojfsbq7fAPTb1XaVkg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/7.1.1/d3.min.js"
+integrity="sha512-COTaPOlz12cG4fSfcBsxZsjauBAyldqp+8FQUM/dZHm+ts/jR4AFoJhCqxy8K10Jrf3pojfsbq7fAPTb1XaVkg=="
+crossorigin="anonymous" referrerpolicy="no-referrer"></script>
 <script>
     var url = "/app/ranking/{{ $label }}/json";
+    var container = document.getElementById("svg-container");
+    var svg = d3.select(container).append("svg");
+
     d3.json(url).then( data => {
         var colors = d3.scaleLinear().domain([0, 1]).range(["blue", "orange"]);
 
-        var svg = d3.select("svg");
-        var width = +svg.attr("width"),
-        height = +svg.attr("height");
+        var width = container.clientWidth;
+        var height = container.clientHeight;
+
+        svg.attr("width", width);
+        svg.attr("height", height);
+        console.log(width);
 
         svg.attr("font-size", 11)
             .attr("font-family", "sans-serif")
@@ -27,8 +36,6 @@
             .sum(d => d.score))
 
         const root = pack(data);
-        console.log(root);
-
         const leaf = svg.selectAll("g")
             .data(root.leaves())
             .join("g")
@@ -56,7 +63,7 @@
 
         leaf.append("title")
             .text(d => d.score);
-
     });
+
 </script>
 @endsection
\ No newline at end of file