cleaner area line option (WIP)

src/marks/area.d.ts

@@ -1,11 +1,12 @@
 import type {ChannelValue, ChannelValueDenseBinSpec, ChannelValueSpec} from "../channel.js";
 import type {CurveOptions} from "../curve.js";
 import type {Data, MarkOptions, RenderableMark} from "../mark.js";
+import type {MarkerOptions} from "../marker.js";
 import type {BinOptions, BinReducer} from "../transforms/bin.js";
 import type {StackOptions} from "../transforms/stack.js";
 
 /** Options for the area, areaX, and areaY marks. */
-export interface AreaOptions extends MarkOptions, StackOptions, CurveOptions {
+export interface AreaOptions extends MarkOptions, StackOptions, CurveOptions, MarkerOptions {
   /**
    * The required primary (starting, often left) horizontal position channel,
    * representing the area’s baseline, typically bound to the *x* scale. For
@@ -45,7 +46,9 @@ export interface AreaOptions extends MarkOptions, StackOptions, CurveOptions {
 
   /**
    * Whether a line should be drawn connecting the points with coordinates *x2*,
-   * *y2*; the **stroke** then applies to that line and defaults to *currentColor*.
+   * *y2*; the **stroke** then applies to that line and defaults to
+   * *currentColor*, and **fillOpacity** defaults to 0.3. Marker options are
+   * applied to the line path.
    */
   line?: boolean;
 }

src/marks/area.js

@@ -2,12 +2,16 @@ import {area as shapeArea, line as shapeLine} from "d3";
 import {create} from "../context.js";
 import {maybeCurve} from "../curve.js";
 import {Mark} from "../mark.js";
+import {applyGroupedMarkers, markers} from "../marker.js";
 import {first, maybeZ, second} from "../options.js";
 import {applyDirectStyles, applyIndirectStyles, applyTransform, applyGroupedChannelStyles} from "../style.js";
 import {groupIndex, offset} from "../style.js";
 import {maybeDenseIntervalX, maybeDenseIntervalY} from "../transforms/bin.js";
 import {maybeStackX, maybeStackY} from "../transforms/stack.js";
 
+const noStroke = {stroke: null, strokeWidth: null, strokeOpacity: null, strokeLinejoin: null, strokeLinecap: null, strokeMiterlimit: null, strokeDasharray: null, strokeDashoffset: null}; // prettier-ignore
+const noFill = {fill: null, fillOpacity: null};
+
 const defaults = {
   ariaLabel: "area",
   strokeWidth: 1,
@@ -29,47 +33,47 @@ export class Area extends Mark {
         z: {value: maybeZ(options), optional: true}
       },
       options,
-      line ? {...defaults, stroke: "currentColor", strokeWidth: 1.5} : defaults
+      line ? {...defaults, stroke: "currentColor", strokeWidth: 1.5, fillOpacity: 0.3} : defaults
     );
     this.z = z;
     this.curve = maybeCurve(curve, tension);
     this.line = !!line;
+    if (this.line) markers(this, options);
   }
   filter(index) {
     return index;
   }
   render(index, scales, channels, dimensions, context) {
     const {x1: X1, y1: Y1, x2: X2 = X1, y2: Y2 = Y1} = channels;
+    const areaShape = shapeArea()
+      .curve(this.curve)
+      .defined((i) => i >= 0)
+      .x0((i) => X1[i])
+      .y0((i) => Y1[i])
+      .x1((i) => X2[i])
+      .y1((i) => Y2[i]);
     return create("svg:g", context)
-      .call(applyIndirectStyles, this, dimensions, context)
+      .call(this.line ? () => {} : applyIndirectStyles, this, dimensions, context)
       .call(applyTransform, this, scales, 0, 0)
       .call((g) => {
-        let enter = g
+        const enter = g
           .selectAll()
           .data(groupIndex(index, [X1, Y1, X2, Y2], this, channels))
           .enter();
-        if (this.line) enter = enter.append("g");
-        const area = enter
-          .append("path")
-          .call(applyDirectStyles, this)
-          .call(applyGroupedChannelStyles, this, channels)
-          .attr(
-            "d",
-            shapeArea()
-              .curve(this.curve)
-              .defined((i) => i >= 0)
-              .x0((i) => X1[i])
-              .y0((i) => Y1[i])
-              .x1((i) => X2[i])
-              .y1((i) => Y2[i])
-          );
         if (this.line) {
-          area.attr("stroke", "none");
-          enter
+          const group = enter.append("g");
+          group
             .append("path")
             .call(applyDirectStyles, this)
-            .call(applyGroupedChannelStyles, this, channels)
-            .attr("fill", "none")
+            .call(applyIndirectStyles, {...this, ...noStroke}, dimensions, context)
+            .call(applyGroupedChannelStyles, this, {...channels, ...noStroke})
+            .attr("d", areaShape);
+          group
+            .append("path")
+            .call(applyDirectStyles, this)
+            .call(applyIndirectStyles, {...this, ...noFill, fill: "none"}, dimensions, context)
+            .call(applyGroupedChannelStyles, this, {...channels, ...noFill})
+            .call(applyGroupedMarkers, this, channels, context)
             .attr("transform", offset ? `translate(${offset},${offset})` : null)
             .attr(
               "d",
@@ -79,6 +83,12 @@ export class Area extends Mark {
                 .x((i) => X2[i])
                 .y((i) => Y2[i])
             );
+        } else {
+          enter
+            .append("path")
+            .call(applyDirectStyles, this)
+            .call(applyGroupedChannelStyles, this, channels)
+            .attr("d", areaShape);
         }
       })
       .node();