bar chart margin fix

Author: cklplanet

js/script.js

@@ -812,6 +812,52 @@ document.addEventListener("DOMContentLoaded", function () {
       .text(title);
   }
 
+  function wrapSvgText(textSelection, maxWidth) {
+    textSelection.each(function () {
+      const text = d3.select(this);
+      const originalText = text.text();
+
+      const words = originalText
+        .replace(/\s+·\s+/g, " · ")
+        .split(/\s+/)
+        .reverse();
+
+      let word;
+      let line = [];
+      let lineNumber = 0;
+
+      const lineHeight = 1.1;
+      const x = text.attr("x");
+      const y = text.attr("y");
+      const dy = parseFloat(text.attr("dy") || 0);
+
+      text.text(null);
+
+      let tspan = text.append("tspan")
+        .attr("x", x)
+        .attr("y", y)
+        .attr("dy", `${dy}em`);
+
+      while ((word = words.pop())) {
+        line.push(word);
+        tspan.text(line.join(" "));
+
+        if (tspan.node().getComputedTextLength() > maxWidth && line.length > 1) {
+          line.pop();
+          tspan.text(line.join(" "));
+
+          line = [word];
+
+          tspan = text.append("tspan")
+            .attr("x", x)
+            .attr("y", y)
+            .attr("dy", `${++lineNumber * lineHeight + dy}em`)
+            .text(word);
+        }
+      }
+    });
+  }
+
   function renderChangeBars(data, indicator, endYear) {
     const container = d3.select("#change-chart");
     if (container.empty()) return;
@@ -893,10 +939,14 @@ document.addEventListener("DOMContentLoaded", function () {
           })
       );
 
-    svg.append("g")
+    const yAxis = svg.append("g")
       .attr("transform", `translate(${margin.left},0)`)
       .call(d3.axisLeft(y));
 
+    yAxis.selectAll(".tick text")
+      .attr("font-size", 12)
+      .call(wrapSvgText, margin.left - 24);
+
     svg.selectAll("rect.bar")
       .data(rows)
       .enter()
@@ -915,21 +965,46 @@ document.addEventListener("DOMContentLoaded", function () {
       .append("text")
       .attr("class", "value")
       .attr("x", (d) => {
-        const offset = d.delta >= 0 ? 8 : -8;
-        const rawX = x(d.delta) + offset;
-        return Math.max(margin.left + 6, Math.min(width - margin.right - 6, rawX));
+        const zeroX = x(0);
+        const endX = x(d.delta);
+
+        const outsideOffset = d.delta >= 0 ? 8 : -8;
+
+        // Normal outside-label position
+        let labelX = endX + outsideOffset;
+
+        // If a negative label would crash into the y-axis labels,
+        // move it inside the bar near the zero line instead.
+        if (d.delta < 0 && labelX < margin.left + 50) {
+          labelX = endX + 50;
+        }
+
+        // If a positive label would fly off the right edge, pull it inside.
+        if (d.delta > 0 && labelX > width - margin.right - 12) {
+          labelX = width - margin.right - 12;
+        }
+
+        return labelX;
       })
       .attr("y", (d) => y(d.category) + y.bandwidth() / 2 + 4)
       .attr("text-anchor", (d) => {
-        const offset = d.delta >= 0 ? 8 : -8;
-        const rawX = x(d.delta) + offset;
+        const zeroX = x(0);
+        const endX = x(d.delta);
 
-        if (rawX > width - margin.right - 6) return "end";
-        if (rawX < margin.left + 6) return "start";
+        let labelX = endX + (d.delta >= 0 ? 8 : -8);
+
+        if (d.delta < 0 && labelX < margin.left + 12) {
+          return "end";
+        }
+
+        if (d.delta > 0 && labelX > width - margin.right - 12) {
+          return "end";
+        }
 
         return d.delta >= 0 ? "start" : "end";
       })
       .attr("font-size", 12)
+      .attr("font-weight", 600)
       .attr("fill", "#333")
       .text((d) => formatValue(d.delta));