inline facets and axes (#799)

* clean internals

* inline faceting

* flatten facet axes

* consolidate mark state; require channel names

* local variable instead of selection.call

* comments

* enter-append instead of join

* aria-label=facet

Author: mbostock

src/axis.js

@@ -41,14 +41,14 @@ export class AxisX {
   render(
     index,
     {[this.name]: x, fy},
-    channels,
     {
       width,
       height,
       marginTop,
       marginRight,
       marginBottom,
       marginLeft,
+      offsetLeft = 0,
       facetMarginTop,
       facetMarginBottom,
       labelMarginLeft = 0,
@@ -71,7 +71,7 @@ export class AxisX {
     const ty = offsetSign * offset + (axis === "top" ? marginTop : height - marginBottom);
     return create("svg:g")
         .call(applyAria, this)
-        .attr("transform", `translate(0,${ty})`)
+        .attr("transform", `translate(${offsetLeft},${ty})`)
         .call(createAxis(axis === "top" ? axisTop : axisBottom, x, this))
         .call(maybeTickRotate, tickRotate)
         .attr("font-size", null)
@@ -134,14 +134,14 @@ export class AxisY {
   render(
     index,
     {[this.name]: y, fx},
-    channels,
     {
       width,
       height,
       marginTop,
       marginRight,
       marginBottom,
       marginLeft,
+      offsetTop = 0,
       facetMarginLeft,
       facetMarginRight
     }
@@ -162,7 +162,7 @@ export class AxisY {
     const tx = offsetSign * offset + (axis === "right" ? width - marginRight : marginLeft);
     return create("svg:g")
         .call(applyAria, this)
-        .attr("transform", `translate(${tx},0)`)
+        .attr("transform", `translate(${tx},${offsetTop})`)
         .call(createAxis(axis === "right" ? axisRight : axisLeft, y, this))
         .call(maybeTickRotate, tickRotate)
         .attr("font-size", null)

src/legends/ramp.js

@@ -105,9 +105,10 @@ export function legendRamp(color, {
     x = applyRange(scaleLinear().domain([-1, range.length - 1]), [marginLeft, width - marginRight]);
 
     svg.append("g")
-      .selectAll("rect")
+      .selectAll()
       .data(range)
-      .join("rect")
+      .enter()
+      .append("rect")
         .attr("x", (d, i) => x(i - 1))
         .attr("y", marginTop)
         .attr("width", (d, i) => x(i) - x(i - 1))
@@ -123,9 +124,10 @@ export function legendRamp(color, {
     x = applyRange(scaleBand().domain(domain), [marginLeft, width - marginRight]);
 
     svg.append("g")
-      .selectAll("rect")
+      .selectAll()
       .data(domain)
-      .join("rect")
+      .enter()
+      .append("rect")
         .attr("x", x)
         .attr("y", marginTop)
         .attr("width", Math.max(0, x.bandwidth() - 1))

src/legends/swatches.js

@@ -117,7 +117,8 @@ function legendItems(scale, {
         .style("columns", columns)
       .selectAll()
       .data(scale.domain)
-      .join("div")
+      .enter()
+      .append("div")
         .attr("class", `${className}-swatch`)
         .call(swatch, scale)
         .call(item => item.append("div")
@@ -142,7 +143,8 @@ function legendItems(scale, {
     swatches
       .selectAll()
       .data(scale.domain)
-      .join("span")
+      .enter()
+      .append("span")
         .attr("class", `${className}-swatch`)
         .call(swatch, scale)
         .append(function() {

src/marks/area.js

@@ -8,7 +8,6 @@ import {maybeIdentityX, maybeIdentityY} from "../transforms/identity.js";
 import {maybeStackX, maybeStackY} from "../transforms/stack.js";
 
 const defaults = {
-  filter: null,
   ariaLabel: "area",
   strokeWidth: 1,
   strokeLinecap: "round",
@@ -34,6 +33,9 @@ export class Area extends Mark {
     this.z = z;
     this.curve = Curve(curve, tension);
   }
+  filter(index) {
+    return index;
+  }
   render(I, {x, y}, channels, dimensions) {
     const {x1: X1, y1: Y1, x2: X2 = X1, y2: Y2 = Y1} = channels;
     const {dx, dy} = this;
@@ -42,7 +44,8 @@ export class Area extends Mark {
         .call(applyTransform, x, y, dx, dy)
         .call(g => g.selectAll()
           .data(groupIndex(I, [X1, Y1, X2, Y2], this, channels))
-          .join("path")
+          .enter()
+          .append("path")
             .call(applyDirectStyles, this)
             .call(applyGroupedChannelStyles, this, channels)
             .attr("d", shapeArea()

src/marks/arrow.js

@@ -69,7 +69,8 @@ export class Arrow extends Mark {
         .call(applyTransform, x, y, offset + dx, offset + dy)
         .call(g => g.selectAll()
           .data(index)
-          .join("path")
+          .enter()
+          .append("path")
             .call(applyDirectStyles, this)
             .attr("d", i => {
               // The start ⟨x1,y1⟩ and end ⟨x2,y2⟩ points may be inset, and the

src/marks/bar.js

@@ -25,7 +25,8 @@ export class AbstractBar extends Mark {
         .call(this._transform, scales, dx, dy)
         .call(g => g.selectAll()
           .data(index)
-          .join("rect")
+          .enter()
+          .append("rect")
             .call(applyDirectStyles, this)
             .attr("x", this._x(scales, channels, dimensions))
             .attr("width", this._width(scales, channels, dimensions))

src/marks/dot.js

@@ -58,7 +58,8 @@ export class Dot extends Mark {
         .call(applyTransform, x, y, offset + dx, offset + dy)
         .call(g => g.selectAll()
           .data(index)
-          .join(circle ? "circle" : "path")
+          .enter()
+          .append(circle ? "circle" : "path")
             .call(applyDirectStyles, this)
             .call(circle
               ? selection => {

src/marks/image.js

@@ -68,7 +68,8 @@ export class Image extends Mark {
         .call(applyTransform, x, y, offset + dx, offset + dy)
         .call(g => g.selectAll()
           .data(index)
-          .join("image")
+          .enter()
+          .append("image")
             .call(applyDirectStyles, this)
             .attr("x", W && X ? i => X[i] - W[i] / 2 : W ? i => cx - W[i] / 2 : X ? i => X[i] - this.width / 2 : cx - this.width / 2)
             .attr("y", H && Y ? i => Y[i] - H[i] / 2 : H ? i => cy - H[i] / 2 : Y ? i => Y[i] - this.height / 2 : cy - this.height / 2)

src/marks/line.js

@@ -7,7 +7,6 @@ import {maybeDenseIntervalX, maybeDenseIntervalY} from "../transforms/bin.js";
 import {applyGroupedMarkers, markers} from "./marker.js";
 
 const defaults = {
-  filter: null,
   ariaLabel: "line",
   fill: "none",
   stroke: "currentColor",
@@ -34,6 +33,9 @@ export class Line extends Mark {
     this.curve = Curve(curve, tension);
     markers(this, options);
   }
+  filter(index) {
+    return index;
+  }
   render(I, {x, y}, channels, dimensions) {
     const {x: X, y: Y} = channels;
     const {dx, dy} = this;
@@ -42,7 +44,8 @@ export class Line extends Mark {
         .call(applyTransform, x, y, offset + dx, offset + dy)
         .call(g => g.selectAll()
           .data(groupIndex(I, [X, Y], this, channels))
-          .join("path")
+          .enter()
+          .append("path")
             .call(applyDirectStyles, this)
             .call(applyGroupedChannelStyles, this, channels)
             .call(applyGroupedMarkers, this, channels)

src/marks/link.js

@@ -36,7 +36,8 @@ export class Link extends Mark {
         .call(applyTransform, x, y, offset + dx, offset + dy)
         .call(g => g.selectAll()
           .data(index)
-          .join("path")
+          .enter()
+          .append("path")
             .call(applyDirectStyles, this)
             .attr("d", i => {
               const p = path();

src/marks/rect.js

@@ -53,7 +53,8 @@ export class Rect extends Mark {
         .call(applyTransform, x, y, dx, dy)
         .call(g => g.selectAll()
           .data(index)
-          .join("rect")
+          .enter()
+          .append("rect")
             .call(applyDirectStyles, this)
             .attr("x", X1 && X2 && !isCollapsed(x) ? i => Math.min(X1[i], X2[i]) + insetLeft : marginLeft + insetLeft)
             .attr("y", Y1 && Y2 && !isCollapsed(y) ? i => Math.min(Y1[i], Y2[i]) + insetTop : marginTop + insetTop)

src/marks/rule.js

@@ -41,9 +41,10 @@ export class RuleX extends Mark {
     return create("svg:g")
         .call(applyIndirectStyles, this, dimensions)
         .call(applyTransform, X && x, null, offset, 0)
-        .call(g => g.selectAll("line")
+        .call(g => g.selectAll()
           .data(index)
-          .join("line")
+          .enter()
+          .append("line")
             .call(applyDirectStyles, this)
             .attr("x1", X ? i => X[i] : (marginLeft + width - marginRight) / 2)
             .attr("x2", X ? i => X[i] : (marginLeft + width - marginRight) / 2)
@@ -84,9 +85,10 @@ export class RuleY extends Mark {
     return create("svg:g")
         .call(applyIndirectStyles, this, dimensions)
         .call(applyTransform, null, Y && y, dx, offset + dy)
-        .call(g => g.selectAll("line")
+        .call(g => g.selectAll()
           .data(index)
-          .join("line")
+          .enter()
+          .append("line")
             .call(applyDirectStyles, this)
             .attr("x1", X1 && !isCollapsed(x) ? i => X1[i] + insetLeft : marginLeft + insetLeft)
             .attr("x2", X2 && !isCollapsed(x) ? (x.bandwidth ? i => X2[i] + x.bandwidth() - insetRight : i => X2[i] - insetRight) : width - marginRight - insetRight)

src/marks/text.js

@@ -68,7 +68,8 @@ export class Text extends Mark {
         .call(applyTransform, x, y, offset + dx, offset + dy)
         .call(g => g.selectAll()
           .data(index)
-          .join("text")
+          .enter()
+          .append("text")
             .call(applyDirectStyles, this)
             .call(applyMultilineText, this, T)
             .attr("transform", R ? (X && Y ? i => `translate(${X[i]},${Y[i]}) rotate(${R[i]})`

src/marks/tick.js

@@ -18,9 +18,10 @@ class AbstractTick extends Mark {
     return create("svg:g")
         .call(applyIndirectStyles, this, dimensions)
         .call(this._transform, scales, dx, dy)
-        .call(g => g.selectAll("line")
+        .call(g => g.selectAll()
           .data(index)
-          .join("line")
+          .enter()
+          .append("line")
             .call(applyDirectStyles, this)
             .attr("x1", this._x1(scales, channels, dimensions))
             .attr("x2", this._x2(scales, channels, dimensions))

src/marks/vector.js

@@ -48,7 +48,8 @@ export class Vector extends Mark {
         .call(applyTransform, x, y, offset + dx, offset + dy)
         .call(g => g.selectAll()
           .data(index)
-          .join("path")
+          .enter()
+          .append("path")
             .call(applyDirectStyles, this)
             .attr("d", i => {
               const l = fl(i), a = fr(i) * radians;