group segments by z

[Fil]

This PR makes groupIndex return a nested collection of indices per z. In short, it creates segmented lines and areas as a svg:g for each line, containing all the path segments, rather than flattening all the segments together. See #761 (comment) for context.

As a consequence, obviously, is that each line (in the "normal" case) is wrapped in a svg:g.

This allows an easier manipulation of lines and areas with D3 or with vector graphics software, and also makes it easier to create alternative grouped marks.

[Fil]

Let me share one experiment here, even if it's not super conclusive. In the image below, we have one path per z-line and a svg:use for each segment, with a specific stroke-dasharray to tell where the ink should go:

As you can see, it's better than the original, but still "choppy" (and, tbh, rendering so many use:path is quite slow…). I'm not pushing the code—it's obviously unfinished (the dash offset is not computed as the actual length that is needed)—, and I feel it's still going to be unsatisfying anyway. The diff shows what I've tried so far:

diff --git a/src/marks/line.js b/src/marks/line.js
index 7816216..38949ae 100644
--- a/src/marks/line.js
+++ b/src/marks/line.js
@@ -39,17 +39,29 @@ export class Line extends Mark {
         .call(g => g.selectAll()
           .data(groupIndex(I, [X, Y], channels))
           .join("g")
+            .call(g => g.append("path")
+              .attr("d", segments => shapeLine()
+                .curve(this.curve)
+                .defined(i => i >= 0)
+                .x(i => X[i])
+                .y(i => Y[i])
+                (segments.flat()))
+              .attr("id", function(segments) {
+                const id = "pu" + segments.flat().join("-"); // TODO: unique id generator
+                const href = `#${id}`;
+                // TODO: proper measurement of the correct cover start and end
+                const cover = this.getTotalLength() / segments.length;
+                segments.forEach((segment, count) => Object.assign(segment, {cover, count, href}));
+                return id;
+              })
+            )
             .selectAll()
             .data(segments => segments)
-            .join("path")
+            .join("use")
+              .attr("href", ({href}) => href)
+              .attr("stroke-dasharray", ({count, cover}) => [0, count * cover, cover, 100000])
               .call(applyDirectStyles, this)
               .call(applyGroupedChannelStyles, this, channels)
-              .call(applyGroupedMarkers, this, channels)
-              .attr("d", shapeLine()
-                .curve(this.curve)
-                .defined(i => i >= 0)
-                .x(i => X[i])
-                .y(i => Y[i])))
+              .call(applyGroupedMarkers, this, channels))
       .node();
   }
 }