From ab145e860220cade7e9fab27ff56f79cfc1016f3 Mon Sep 17 00:00:00 2001
From: Sam Hadow <sam.hadow@inbox.lv>
Date: Tue, 23 Jan 2024 21:50:30 +0100
Subject: [PATCH] clipPath

---
 web/app.js | 39 ++++++++++++++++++++++++---------------
 1 file changed, 24 insertions(+), 15 deletions(-)

diff --git a/web/app.js b/web/app.js
index a8e7338..765823c 100644
--- a/web/app.js
+++ b/web/app.js
@@ -1,9 +1,9 @@
 // set the margins of the graph
 const margin = {
         top: 10,
-        right: 60,
+        right: 30,
         bottom: 30,
-        left: 30
+        left: window.innerWidth*0.1
     };
 // get window size
 const width = window.innerWidth - margin.right - margin.left -10;
@@ -23,9 +23,10 @@ d3.csv('http://127.0.0.1/output.csv', d => {
     }
 }).then(function(data) {
 
+    // Date domain (width)
     const x = d3.scaleTime()
         .domain(d3.extent(data, d => d.date))
-        .range([0, width]);
+        .range([3, width-3]);
 
     // Group the data by (itemid, skuid)
     const nestedData = d3.group(data, d => d.skuid);
@@ -51,7 +52,7 @@ d3.csv('http://127.0.0.1/output.csv', d => {
     svgs.each(function(key) {
         const dataSubset = nestedData.get(key);
 
-        // Date domain (width)
+        // Price domain (height)
         const y = d3.scaleLinear()
             .domain([d3.min(dataSubset, d => d.value) - 1, d3.max(dataSubset, d => d.value) + 1])
             .range([height, 0]);
@@ -67,11 +68,29 @@ d3.csv('http://127.0.0.1/output.csv', d => {
         svg.append("g")
             .call(d3.axisLeft(y));
 
+
+        // clipPath, area drawn
+        const clip_line = svg.append("defs").append("svg:clipPath")
+            .attr("id", "clip_line")
+            .append("svg:rect")
+            .attr("width", width )
+            .attr("height", height )
+            .attr("x", 0)
+            .attr("y", 0);
+        const clip_dot = svg.append("defs").append("svg:clipPath")
+            .attr("id", "clip_dot")
+            .append("svg:rect")
+            .attr("width", width+10 )
+            .attr("height", height+10 )
+            .attr("x", -5)
+            .attr("y", -5);
+
         // lines between dots
         // plotted before dots to stay below them
         svg.append("path")
             .datum(dataSubset)
             .attr("id", "line_path")
+            .attr("clip-path", "url(#clip_line)") // bind to clipPath
             .attr("fill", "none")
             .attr("stroke", "black")
             .attr("stroke-width", 1.5)
@@ -80,16 +99,6 @@ d3.csv('http://127.0.0.1/output.csv', d => {
                 .y(d => y(d.value))
             );
 
-        // ZOOM
-        // clipPath, area drawn
-        const clip = svg.append("defs").append("svg:clipPath")
-            .attr("id", "clip")
-            .append("svg:rect")
-            .attr("width", width )
-            .attr("height", height )
-            .attr("x", 0)
-            .attr("y", 0);
-
         // brushing
         const brush = d3.brushX()
             .extent( [ [0,0], [width,height] ] )  // select whole graph
@@ -169,7 +178,6 @@ d3.csv('http://127.0.0.1/output.csv', d => {
 
         // Interaction functions
         const mouseover = function(event, d) {
-            // var formatted_date = `${d.date.getDate()}-${d.date.getMonth()}-${d.date.getFullYear()}`;
             var formatted_date = d.date.toISOString().split('T')[0]
             Tooltip
                 .style("opacity", 1)
@@ -196,6 +204,7 @@ d3.csv('http://127.0.0.1/output.csv', d => {
                                 .data(dataSubset)
                                 .enter()
                                 .append("circle")
+                                .attr("clip-path", "url(#clip_dot)") // bind to clipPath
                                 .attr("cx", d => x(d.date))
                                 .attr("cy", d => y(d.value))
                                 .attr("r", 5)