Try fixing the SVG display bug againv1.4.0-beta.3

2 files changed, 10 insertions, 9 deletions

diff --git a/assets/css/screen.css b/assets/css/screen.css
index 2c27271..ae7a7da 100644
--- a/assets/css/screen.css
+++ b/assets/css/screen.css
@@ -437,6 +437,7 @@ body>footer:hover nav {
         max-width: 100vw;
     }
     .media #gfx svg {
+        display: block;
         height: 100vh;
     }
 
diff --git a/ps/gfx/sine.js b/ps/gfx/sine.js
index 6958221..10bf7b6 100644
--- a/ps/gfx/sine.js
+++ b/ps/gfx/sine.js
@@ -12,7 +12,7 @@
 
     const samples = Math.PI * 3
     var   data    = generateSineData(samples)
-    
+
     console.log(data)
 
     var xScale = d3.scaleLinear().domain([0, samples-1]).range([0, w])
@@ -29,8 +29,8 @@
 	.y1(function(d) { return yScale(d.y || d); });
 
     const svg   = view.append('svg')
-	  .attr('width', width + margin.left + margin.right)
-	  .attr('height', height + margin.top + margin.bottom)
+	  .attr('width', bbox.width + margin.left + margin.right)
+	  .attr('height', bbox.height + margin.top + margin.bottom)
 	  .append('g')
 	  .attr('transform',function(){
               var x1 = bbox.x + bbox.width / 2
@@ -38,13 +38,13 @@
 	      console.log(`rotate(90, ${x1}, ${y1}) translate(${margin.left}, ${margin.top})`)
 	      return `translate(${margin.left - x1}, ${margin.top -y1}) rotate(90, ${x1}, ${y1})`
           })
-    
-//    svg.append("defs").append("clipPath").attr("id", "clip")
-//	.append("rect").attr("width", width).attr("height", height)
-//    	.append("rect").attr("width", h).attr("height", w)    
+
+    svg.append("defs").append("clipPath").attr("id", "clip")
+	.append("rect").attr("width", width).attr("height", height)
+    	.append("rect").attr("width", h).attr("height", w)    
 
     const graphContainer = svg.append("g")
-//           .attr('transform', `translate(-${initialX}, -${initialY})`);
+           .attr('transform', `translate(-${initialX}, -${initialY})`);
 
     const state = {
 	initialX,
@@ -77,7 +77,7 @@
 		.attr('d', sine)
 	})
     }
-    
+
     var drawGraph = function(state) {
 	state.time += increase;
 	drawSineWave(state);