From 58d0c0f98fa65da8df178fd817a08e12266b6519 Mon Sep 17 00:00:00 2001
From: Thibault Debatty <thibault.debatty@gmail.com>
Date: Mon, 25 Oct 2021 21:16:07 +0200
Subject: [PATCH] bubble view : responsive (adapt to size of window)
---
resources/views/app/bubble.blade.php | 23 +++++++++++++++--------
1 file changed, 15 insertions(+), 8 deletions(-)
diff --git a/resources/views/app/bubble.blade.php b/resources/views/app/bubble.blade.php
index 750a8f7..73847be 100644
--- a/resources/views/app/bubble.blade.php
+++ b/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
--
GitLab