tick marker

Author: mbostock

src/marker.d.ts

@@ -7,8 +7,20 @@
  * - *circle-fill* - a filled circle with a white stroke and 3px radius
  * - *circle-stroke* - a stroked circle with a white fill and 3px radius
  * - *circle* - alias for *circle-fill*
+ * - *tick* - a small opposing line
+ * - *tick-x* - a small horizontal opposing line
+ * - *tick-y* - a small vertical opposing line
  */
-export type MarkerName = "arrow" | "arrow-reverse" | "dot" | "circle" | "circle-fill" | "circle-stroke";
+export type MarkerName =
+  | "arrow"
+  | "arrow-reverse"
+  | "dot"
+  | "circle"
+  | "circle-fill"
+  | "circle-stroke"
+  | "tick"
+  | "tick-x"
+  | "tick-y";
 
 /** A custom marker implementation. */
 export type MarkerFunction = (color: string, context: {document: Document}) => SVGMarkerElement;

src/marker.js

@@ -24,6 +24,12 @@ function maybeMarker(marker) {
       return markerCircleFill;
     case "circle-stroke":
       return markerCircleStroke;
+    case "tick":
+      return markerTick("auto");
+    case "tick-x":
+      return markerTick(90);
+    case "tick-y":
+      return markerTick(0);
   }
   throw new Error(`invalid marker: ${marker}`);
 }
@@ -79,6 +85,18 @@ function markerCircleStroke(color, context) {
     .node();
 }
 
+function markerTick(orient) {
+  return (color, context) =>
+    create("svg:marker", context)
+      .attr("viewBox", "-3 -3 6 6")
+      .attr("markerWidth", 6)
+      .attr("markerHeight", 6)
+      .attr("orient", orient)
+      .attr("stroke", color)
+      .call((marker) => marker.append("path").attr("d", "M0,-3v6"))
+      .node();
+}
+
 let nextMarkerId = 0;
 
 export function applyMarkers(path, mark, {stroke: S}, context) {