diff options
| -rw-r--r-- | assets/css/screen.css | 1 | ||||
| -rw-r--r-- | ps/gfx/sine.js | 18 |
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); |