tip: respect empty lines (#1579)

* tip: respect empty lines

closes #1578

* set value to a space if name and value are empty

* tweak

* fix test snapshot

---------

Co-authored-by: Mike Bostock <[email protected]>

Author: Fil

src/marks/tip.js

@@ -181,26 +181,25 @@ export class Tip extends Mark {
     // exact text metrics and translate the text as needed once we know the
     // tip’s orientation (anchor).
     function renderLine(selection, name, value, color) {
-      if (name) name = "\u200b" + name; // zwsp for double-click
       let title;
       let w = lineWidth * 100;
       const [j] = cut(name, w, widthof, ee);
       if (j >= 0) {
         // name is truncated
         name = name.slice(0, j).trimEnd() + ellipsis;
-        value = "";
         title = value.trim();
+        value = "";
       } else {
-        if (name) value = " " + value;
+        if (name || (!value && !color)) value = " " + value;
         const [k] = cut(value, w - widthof(name), widthof, ee);
         if (k >= 0) {
           // value is truncated
           value = value.slice(0, k).trimEnd() + ellipsis;
           title = value.trim();
         }
       }
-      const line = selection.append("tspan").attr("x", 0).attr("dy", `${lineHeight}em`);
-      line.append("tspan").attr("font-weight", "bold").text(name);
+      const line = selection.append("tspan").attr("x", 0).attr("dy", `${lineHeight}em`).text("\u200b"); // zwsp for double-click
+      if (name) line.append("tspan").attr("font-weight", "bold").text(name);
       if (value) line.append(() => document.createTextNode(value));
       if (color) line.append("tspan").text(" ■").attr("fill", color).style("user-select", "none");
       if (title) line.append("title").text(title);

test/output/tipNewLines.svg

@@ -144,3 +144,29 @@ export async function tipRule() {
   const penguins = await d3.csv<any>("data/penguins.csv", d3.autoType);
   return Plot.ruleX(penguins, {x: "body_mass_g", tip: true}).plot();
 }
+
+export async function tipNewLines() {
+  return Plot.plot({
+    height: 40,
+    style: "overflow: visible;",
+    x: {axis: "top", label: null},
+    marks: [
+      Plot.tip(
+        [
+          {x: "after", label: `Hello\n\n`},
+          {x: "before", label: `\n\nWorld`},
+          {x: "between", label: `{\n\n}`}
+        ],
+        {
+          x: "x",
+          anchor: "top",
+          title: "label"
+        }
+      ),
+      Plot.tip([{x: "no name"}], {
+        x: "x",
+        channels: {a: ["first"], b: ["second"], "": [""]}
+      })
+    ]
+  });
+}