aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorhellekin <hellekin@cepheide.org>2020-11-08 17:00:56 +0100
committerhellekin <hellekin@cepheide.org>2020-11-08 17:00:56 +0100
commit29693a35fa9d6c3b987b646796ee197a95e2c3dc (patch)
tree57a9107f8f8fd39dae01bde225830d8cd4295b7d
parentc234b95a467e30101ba2f7365e27555d3f3b8b1d (diff)
downloadlesoiseaux.io-1.4.0-beta.3.tar.gz
Try fixing the SVG display bug againv1.4.0-beta.3
-rw-r--r--assets/css/screen.css1
-rw-r--r--ps/gfx/sine.js18
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);