Editing graph margins

EmoruwaTolu · Apr 24, 2024 · b7357b9 · b7357b9
1 parent c149eab
commit b7357b9
Showing 1 changed file with 29 additions and 21 deletions.
diff --git a/prem-data/src/components/scatter-chart/scatter-chart.js b/prem-data/src/components/scatter-chart/scatter-chart.js
@@ -14,47 +14,55 @@ function ScatterGraph({data}){
     const svgRef = useRef();
 
     useEffect(() => {
-        const w = 250
-        const h = 300
+        const w = 250;
+        const h = 300;
+        const margin = { top: 20, right: 20, bottom: 50, left: 50 }; // Add margins
+
         const svg = d3.select(svgRef.current)
-            .attr('width', w)
-            .attr('height', h)
-            .style('overflow', 'visible')
+            .attr('width', w + margin.left + margin.right) // Adjust for margins
+            .attr('height', h + margin.top + margin.bottom) // Adjust for margins
+            .append("g")
+            .attr("transform", `translate(${margin.left},${margin.top})`); // Translate to accommodate margins
 
         const xScale = d3.scaleLinear()
             .domain([0, 50])
-            .range([0, w])
+            .range([0, w]);
 
         const yScale = d3.scaleLinear()
             .domain([0, 100])
-            .range([h, 0])
+            .range([h, 0]);
 
-        const xAxis = d3.axisBottom(xScale).ticks(plotData.length)
-        const yAxis = d3.axisLeft(yScale).ticks(10)
+        const xAxis = d3.axisBottom(xScale).ticks(plotData.length);
+        const yAxis = d3.axisLeft(yScale).ticks(10);
 
         svg.append('g')
-            .call(xAxis)
-            .attr('transform', `translate(0, ${h})`);
+            .attr('transform', `translate(0, ${h})`)
+            .call(xAxis);
+
         svg.append('g')
             .call(yAxis);
 
         svg.append('text')
-            .attr('x', w/2)
-            .attr('y', h + 50)
-            .text('x')
+            .attr('x', w / 2)
+            .attr('y', h + margin.bottom / 2) // Adjust for margin
+            .text('x');
+
         svg.append('text')
-            .attr('y', h/2)
-            .attr('x', -50)
-            .text('y')
+            .attr('transform', 'rotate(-90)')
+            .attr('y', -margin.left) // Adjust for margin
+            .attr('x', -h / 2)
+            .attr('dy', '1em')
+            .text('y');
 
         svg.selectAll()
             .data(data)
             .enter()
             .append('circle')
-                .attr('cx', d => xScale(d.totalXGD))
-                .attr('cy', d => yScale(d.points))
-                .attr('r', 4)
-                .style("fill", d => `${teamColours[d.clubname]}`)
+            .attr('cx', d => xScale(d.totalXGD))
+            .attr('cy', d => yScale(d.points))
+            .attr('r', 4)
+            .style("fill", d => `${teamColours[d.clubname]}`);
+
 
 
     }, [plotData])