fix graph

_includes/notes_graph.html

@@ -31,12 +31,13 @@
     background: #fcfcfc;
     border-radius: 4px;
     height: auto;
+    max-width: 800px;
   }
 </style>
 
 <div id="graph-wrapper">
   <script>
-    var commentFlag = true;
+    var hasRun = false;
     
     window.addEventListener("load", loadGraph);
     window.addEventListener("scroll", loadGraph);
@@ -44,10 +45,11 @@
     function loadGraph() {
       if (!( document.getElementById("graph-wrapper").getBoundingClientRect().top <
              window.innerHeight * 1.5 &&
-          commentFlag)){
+          !hasRun)){
         return;
       }
       var oScript = document.createElement("script");
+      hasRun = true;
       oScript.src = "https://cdnjs.cloudflare.com/ajax/libs/d3/5.16.0/d3.min.js";
       oScript.crossOrigin = 'anonymous';
       oScript.integrity =
@@ -175,16 +177,15 @@
 
         const graphWrapper = document.getElementById('graph-wrapper')
         const element = document.createElementNS("http://www.w3.org/2000/svg", "svg");
-        element.setAttribute("width", graphWrapper.getBoundingClientRect().width);
-        element.setAttribute("height", window.innerHeight * 0.8);
-        graphWrapper.appendChild(element);
-
-        const reportWindowSize = () => {
-          element.setAttribute("width", window.innerWidth);
-          element.setAttribute("height", window.innerHeight);
+        const calculateWrapperSize = () => {
+          element.setAttribute("width", graphWrapper.offsetWidth);
+          element.setAttribute("height", window.innerHeight * 0.8);
         };
 
-        window.onresize = reportWindowSize;
+        calculateWrapperSize()
+        graphWrapper.appendChild(element);
+
+        window.onresize = calculateWrapperSize;
 
         const svg = d3.select("svg");
         const width = Number(svg.attr("width"));