line marker

src/marks/line.js

@@ -4,6 +4,7 @@ import {defined} from "../defined.js";
 import {Mark} from "../plot.js";
 import {indexOf, identity, maybeTuple, maybeZ} from "../options.js";
 import {applyDirectStyles, applyIndirectStyles, applyTransform, applyGroupedChannelStyles, offset} from "../style.js";
+import {applyMarkers, markers} from "./marker.js";
 
 const defaults = {
   ariaLabel: "line",
@@ -27,6 +28,7 @@ export class Line extends Mark {
       defaults
     );
     this.curve = Curve(curve, tension);
+    markers(this, options);
   }
   render(I, {x, y}, channels) {
     const {x: X, y: Y, z: Z} = channels;
@@ -39,6 +41,7 @@ export class Line extends Mark {
           .join("path")
             .call(applyDirectStyles, this)
             .call(applyGroupedChannelStyles, this, channels)
+            .call(applyMarkers, this)
             .attr("d", shapeLine()
               .curve(this.curve)
               .defined(i => defined(X[i]) && defined(Y[i]))

src/marks/marker.js

@@ -0,0 +1,89 @@
+import {create} from "d3";
+
+export function markers(mark, {
+  marker,
+  markerStart = marker,
+  markerMid = marker,
+  markerEnd = marker
+} = {}) {
+  mark.markerStart = maybeMarker(markerStart);
+  mark.markerMid = maybeMarker(markerMid);
+  mark.markerEnd = maybeMarker(markerEnd);
+}
+
+function maybeMarker(marker) {
+  if (marker == null || marker === false) return null;
+  if (marker === true) return markerCircleFill;
+  if (typeof marker === "function") return marker;
+  switch (`${marker}`.toLowerCase()) {
+    case "none": return null;
+    case "arrow": return markerArrow;
+    case "circle": case "circle-fill": return markerCircleFill;
+    case "circle-stroke": return markerCircleStroke;
+  }
+  throw new Error(`invalid marker: ${marker}`);
+}
+
+function markerArrow(color) {
+  return create("svg:marker")
+      .attr("viewBox", "-5 -5 10 10")
+      .attr("markerWidth", 6.67)
+      .attr("markerHeight", 6.67)
+      .attr("orient", "auto")
+      .attr("fill", "none")
+      .attr("stroke", color)
+      .attr("stroke-width", 1.5)
+      .attr("stroke-linecap", "round")
+      .attr("stroke-linejoin", "round")
+      .call(marker => marker.append("path").attr("d", "M-1.5,-3l3,3l-3,3"))
+    .node();
+}
+
+function markerCircleFill(color) {
+  return create("svg:marker")
+      .attr("viewBox", "-5 -5 10 10")
+      .attr("markerWidth", 6.67)
+      .attr("markerHeight", 6.67)
+      .attr("fill", color)
+      .attr("stroke", "white")
+      .attr("stroke-width", 1.5)
+      .call(marker => marker.append("circle").attr("r", 3))
+    .node();
+}
+
+function markerCircleStroke(color) {
+  return create("svg:marker")
+      .attr("viewBox", "-5 -5 10 10")
+      .attr("markerWidth", 6.67)
+      .attr("markerHeight", 6.67)
+      .attr("fill", "white")
+      .attr("stroke", color)
+      .attr("stroke-width", 1.5)
+      .call(marker => marker.append("circle").attr("r", 3))
+    .node();
+}
+
+let nextMarkerId = 0;
+
+export function applyMarkers(path, {markerStart, markerMid, markerEnd}) {
+  if (!markerStart && !markerMid && !markerEnd) return;
+  const iriByMarkerColor = new Map();
+  path.each(function() {
+    const color = this.getAttribute("stroke");
+    const applyMarker = (name, marker) => {
+      let iriByColor = iriByMarkerColor.get(marker);
+      if (!iriByColor) iriByMarkerColor.set(marker, iriByColor = new Map());
+      let iri = iriByColor.get(color);
+      if (!iri) {
+        const node = this.parentNode.insertBefore(marker(color), this);
+        const id = `plot-marker-${++nextMarkerId}`;
+        node.setAttribute("id", id);
+        iriByColor.set(color, iri = `url(#${id})`);
+      }
+      this.setAttribute(name, iri);
+    };
+    if (markerStart) applyMarker("marker-start", markerStart);
+    if (markerMid) applyMarker("marker-mid", markerMid);
+    if (markerEnd) applyMarker("marker-end", markerEnd);
+  });
+}