fix Vertical centering for text in headers #24

riatelab · Mar 24, 2022 · ae63908 · ae63908
1 parent 5582340
commit ae63908
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 16 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -5,7 +5,7 @@
 *  dependencies. d3 -> d3 modules ([7bf38eed](https://github.com/neocarto/bertin/commit/7bf38eed0ce65ece529afd7b715347500a60f906))
 
 ##### New Features
-* subgeo ([5bd10d1](https://github.com/neocarto/bertin/commit/5bd10d11d87326eb85f52caeb54498e329c44197)
+* subgeo ([5bd10d1](https://github.com/neocarto/bertin/commit/5bd10d11d87326eb85f52caeb54498e329c44197))
 * topojson ([57b059d](https://github.com/neocarto/bertin/commit/57b059d2d8c8669da6ec223600efeef1e6a732cc))
 * tooltip ([23929633](https://github.com/neocarto/bertin/commit/239296339afa2115343b51342b6bfee16df687d6))
 * add parameters in tooltips ([d9b0394a](https://github.com/neocarto/bertin/commit/d9b0394a416921e4f24972aab035b10e54d44b35))

diff --git a/src/layers/header.js b/src/layers/header.js
@@ -44,19 +44,22 @@ export function addheader(selection, width, options = {}) {
     .attr("fill", background)
     .attr("fill-opacity", backgroundOpacity);
 
-  header
-    .selectAll("text")
-    .data(options.text.split("\n"))
-    .join("text")
-    .attr("x", x)
-    .attr("y", -delta - 5)
-    .attr("font-size", `${fontSize}px`)
-    .attr("dy", (d, i) => i * fontSize)
-    .attr("text-anchor", anchor)
-    .attr("dominant-baseline", "hanging")
-    .attr("fill", fill)
-    .attr("font-family", "sans-serif")
-    .attr("font-weight", "bold")
-    .attr("fill-opacity", 1)
-    .text((d) => d);
+
+    header
+      .selectAll("text")
+      .data(options.text.split("\n"))
+      .join("text")
+      .attr("x", x)
+      //.attr("y", -delta - 5)
+      .attr("y", -delta - 5)
+      .attr("font-size", `${fontSize}px`)
+      .attr("dy", (d, i) => i * fontSize + fontSize/2)
+      .attr("text-anchor", anchor)
+      .attr("dominant-baseline", "central")
+      .attr("fill", fill)
+      .attr("font-family", "sans-serif")
+      .attr("font-weight", "bold")
+      .attr("fill-opacity", 1)
+      .text((d) => d);
+
 }