svelteplot 0.10.3 → 0.11.0-pr-514.0

package/dist/marks/LineY.svelte.d.ts

@@ -1,89 +1,162 @@
-import type { DataRow } from '../index.js';
+import type { DataRow } from '../types/index.js';
 declare function $$render<Datum extends DataRow>(): {
-    props: Omit<import("../types").MarkerOptions & Partial<{
-        filter: import("../types").ConstantAccessor<boolean, Record<string | symbol, import("../types").RawValue>>;
+    props: Omit<import("../types/index.js").MarkerOptions & Partial<{
+        filter: import("../types/index.js").ConstantAccessor<boolean, Record<string | symbol, import("../types/index.js").RawValue>>;
         facet: "auto" | "include" | "exclude";
-        fx: import("../types").ChannelAccessor<Record<string | symbol, import("../types").RawValue>>;
-        fy: import("../types").ChannelAccessor<Record<string | symbol, import("../types").RawValue>>;
-        dx: import("../types").ConstantAccessor<number, Record<string | symbol, import("../types").RawValue>>;
-        dy: import("../types").ConstantAccessor<number, Record<string | symbol, import("../types").RawValue>>;
-        dodgeX: import("../transforms/dodge").DodgeXOptions;
-        dodgeY: import("../transforms/dodge").DodgeYOptions;
-        fill: import("../types").ChannelAccessor<Record<string | symbol, import("../types").RawValue>>;
-        fillOpacity: import("../types").ConstantAccessor<number, Record<string | symbol, import("../types").RawValue>>;
-        sort: ((a: import("../types").RawValue, b: import("../types").RawValue) => number) | {
+        fx: import("../types/index.js").ChannelAccessor<Record<string | symbol, import("../types/index.js").RawValue>>;
+        fy: import("../types/index.js").ChannelAccessor<Record<string | symbol, import("../types/index.js").RawValue>>;
+        dx: import("../types/index.js").ConstantAccessor<number, Record<string | symbol, import("../types/index.js").RawValue>>;
+        dy: import("../types/index.js").ConstantAccessor<number, Record<string | symbol, import("../types/index.js").RawValue>>;
+        dodgeX: import("../transforms/dodge.js").DodgeXOptions;
+        dodgeY: import("../transforms/dodge.js").DodgeYOptions;
+        fill: import("../types/index.js").ChannelAccessor<Record<string | symbol, import("../types/index.js").RawValue>>;
+        fillOpacity: import("../types/index.js").ConstantAccessor<number, Record<string | symbol, import("../types/index.js").RawValue>>;
+        fontFamily: import("../types/index.js").ConstantAccessor<import("csstype").Property.FontFamily, Record<string | symbol, import("../types/index.js").RawValue>>;
+        fontSize: import("../types/index.js").ConstantAccessor<import("csstype").Property.FontSize<number>, Record<string | symbol, import("../types/index.js").RawValue>>;
+        fontStyle: import("../types/index.js").ConstantAccessor<import("csstype").Property.FontStyle, Record<string | symbol, import("../types/index.js").RawValue>>;
+        fontVariant: import("../types/index.js").ConstantAccessor<import("csstype").Property.FontVariant, Record<string | symbol, import("../types/index.js").RawValue>>;
+        fontWeight: import("../types/index.js").ConstantAccessor<import("csstype").Property.FontWeight, Record<string | symbol, import("../types/index.js").RawValue>>;
+        letterSpacing: import("../types/index.js").ConstantAccessor<import("csstype").Property.LetterSpacing<0 | (string & {})>, Record<string | symbol, import("../types/index.js").RawValue>>;
+        wordSpacing: import("../types/index.js").ConstantAccessor<import("csstype").Property.WordSpacing<0 | (string & {})>, Record<string | symbol, import("../types/index.js").RawValue>>;
+        textAnchor: import("../types/index.js").ConstantAccessor<import("csstype").Property.TextAnchor, Record<string | symbol, import("../types/index.js").RawValue>>;
+        textTransform: import("../types/index.js").ConstantAccessor<import("csstype").Property.TextTransform, Record<string | symbol, import("../types/index.js").RawValue>>;
+        textDecoration: import("../types/index.js").ConstantAccessor<import("csstype").Property.TextDecoration<0 | (string & {})>, Record<string | symbol, import("../types/index.js").RawValue>>;
+        sort: ((a: import("../types/index.js").RawValue, b: import("../types/index.js").RawValue) => number) | {
             channel: string;
             order?: "ascending" | "descending";
-        } | import("../types").ConstantAccessor<import("../types").RawValue, Record<string | symbol, import("../types").RawValue>>;
-        stroke: import("../types").ChannelAccessor<Record<string | symbol, import("../types").RawValue>>;
-        strokeWidth: import("../types").ConstantAccessor<number, Record<string | symbol, import("../types").RawValue>>;
-        strokeOpacity: import("../types").ConstantAccessor<number, Record<string | symbol, import("../types").RawValue>>;
-        strokeLinejoin: import("../types").ConstantAccessor<import("csstype").Property.StrokeLinejoin, Record<string | symbol, import("../types").RawValue>>;
-        strokeLinecap: import("../types").ConstantAccessor<import("csstype").Property.StrokeLinecap, Record<string | symbol, import("../types").RawValue>>;
-        strokeMiterlimit: import("../types").ConstantAccessor<number, Record<string | symbol, import("../types").RawValue>>;
-        opacity: import("../types").ChannelAccessor<Record<string | symbol, import("../types").RawValue>>;
-        strokeDasharray: import("../types").ConstantAccessor<string, Record<string | symbol, import("../types").RawValue>>;
-        strokeDashoffset: import("../types").ConstantAccessor<number, Record<string | symbol, import("../types").RawValue>>;
-        mixBlendMode: import("../types").ConstantAccessor<import("csstype").Property.MixBlendMode, Record<string | symbol, import("../types").RawValue>>;
+        } | import("../types/index.js").ConstantAccessor<import("../types/index.js").RawValue, Record<string | symbol, import("../types/index.js").RawValue>>;
+        stroke: import("../types/index.js").ChannelAccessor<Record<string | symbol, import("../types/index.js").RawValue>>;
+        strokeWidth: import("../types/index.js").ConstantAccessor<number, Record<string | symbol, import("../types/index.js").RawValue>>;
+        strokeOpacity: import("../types/index.js").ConstantAccessor<number, Record<string | symbol, import("../types/index.js").RawValue>>;
+        strokeLinejoin: import("../types/index.js").ConstantAccessor<import("csstype").Property.StrokeLinejoin, Record<string | symbol, import("../types/index.js").RawValue>>;
+        strokeLinecap: import("../types/index.js").ConstantAccessor<import("csstype").Property.StrokeLinecap, Record<string | symbol, import("../types/index.js").RawValue>>;
+        strokeMiterlimit: import("../types/index.js").ConstantAccessor<number, Record<string | symbol, import("../types/index.js").RawValue>>;
+        opacity: import("../types/index.js").ChannelAccessor<Record<string | symbol, import("../types/index.js").RawValue>>;
+        strokeDasharray: import("../types/index.js").ConstantAccessor<string, Record<string | symbol, import("../types/index.js").RawValue>>;
+        strokeDashoffset: import("../types/index.js").ConstantAccessor<number, Record<string | symbol, import("../types/index.js").RawValue>>;
+        blend: import("../types/index.js").ConstantAccessor<import("csstype").Property.MixBlendMode, Record<string | symbol, import("../types/index.js").RawValue>>;
+        mixBlendMode: import("../types/index.js").ConstantAccessor<import("csstype").Property.MixBlendMode, Record<string | symbol, import("../types/index.js").RawValue>>;
         clipPath: string;
         mask: string;
-        imageFilter: import("../types").ConstantAccessor<string, Record<string | symbol, import("../types").RawValue>>;
-        shapeRendering: import("../types").ConstantAccessor<import("csstype").Property.ShapeRendering, Record<string | symbol, import("../types").RawValue>>;
-        paintOrder: import("../types").ConstantAccessor<string, Record<string | symbol, import("../types").RawValue>>;
-        onclick: import("svelte/elements").MouseEventHandler<SVGPathElement>;
-        ondblclick: import("svelte/elements").MouseEventHandler<SVGPathElement>;
-        onmouseup: import("svelte/elements").MouseEventHandler<SVGPathElement>;
-        onmousedown: import("svelte/elements").MouseEventHandler<SVGPathElement>;
-        onmouseenter: import("svelte/elements").MouseEventHandler<SVGPathElement>;
-        onmousemove: import("svelte/elements").MouseEventHandler<SVGPathElement>;
-        onmouseleave: import("svelte/elements").MouseEventHandler<SVGPathElement>;
-        onmouseout: import("svelte/elements").MouseEventHandler<SVGPathElement>;
-        onmouseover: import("svelte/elements").MouseEventHandler<SVGPathElement>;
-        onpointercancel: import("svelte/elements").MouseEventHandler<SVGPathElement>;
-        onpointerdown: import("svelte/elements").MouseEventHandler<SVGPathElement>;
-        onpointerup: import("svelte/elements").MouseEventHandler<SVGPathElement>;
-        onpointerenter: import("svelte/elements").MouseEventHandler<SVGPathElement>;
-        onpointerleave: import("svelte/elements").MouseEventHandler<SVGPathElement>;
-        onpointermove: import("svelte/elements").MouseEventHandler<SVGPathElement>;
-        onpointerover: import("svelte/elements").MouseEventHandler<SVGPathElement>;
-        onpointerout: import("svelte/elements").MouseEventHandler<SVGPathElement>;
-        ondrag: import("svelte/elements").MouseEventHandler<SVGPathElement>;
-        ondrop: import("svelte/elements").MouseEventHandler<SVGPathElement>;
-        ondragstart: import("svelte/elements").MouseEventHandler<SVGPathElement>;
-        ondragenter: import("svelte/elements").MouseEventHandler<SVGPathElement>;
-        ondragleave: import("svelte/elements").MouseEventHandler<SVGPathElement>;
-        ondragover: import("svelte/elements").MouseEventHandler<SVGPathElement>;
-        ondragend: import("svelte/elements").MouseEventHandler<SVGPathElement>;
-        ontouchstart: import("svelte/elements").MouseEventHandler<SVGPathElement>;
-        ontouchmove: import("svelte/elements").MouseEventHandler<SVGPathElement>;
-        ontouchend: import("svelte/elements").MouseEventHandler<SVGPathElement>;
-        ontouchcancel: import("svelte/elements").MouseEventHandler<SVGPathElement>;
-        oncontextmenu: import("svelte/elements").MouseEventHandler<SVGPathElement>;
-        onwheel: import("svelte/elements").MouseEventHandler<SVGPathElement>;
+        imageFilter: import("../types/index.js").ConstantAccessor<string, Record<string | symbol, import("../types/index.js").RawValue>>;
+        shapeRendering: import("../types/index.js").ConstantAccessor<import("csstype").Property.ShapeRendering, Record<string | symbol, import("../types/index.js").RawValue>>;
+        paintOrder: import("../types/index.js").ConstantAccessor<string, Record<string | symbol, import("../types/index.js").RawValue>>;
+        onclick: (event: Event & {
+            currentTarget: SVGPathElement;
+        }, datum: Record<string | symbol, import("../types/index.js").RawValue>, index: number) => void;
+        ondblclick: (event: Event & {
+            currentTarget: SVGPathElement;
+        }, datum: Record<string | symbol, import("../types/index.js").RawValue>, index: number) => void;
+        onmouseup: (event: Event & {
+            currentTarget: SVGPathElement;
+        }, datum: Record<string | symbol, import("../types/index.js").RawValue>, index: number) => void;
+        onmousedown: (event: Event & {
+            currentTarget: SVGPathElement;
+        }, datum: Record<string | symbol, import("../types/index.js").RawValue>, index: number) => void;
+        onmouseenter: (event: Event & {
+            currentTarget: SVGPathElement;
+        }, datum: Record<string | symbol, import("../types/index.js").RawValue>, index: number) => void;
+        onmousemove: (event: Event & {
+            currentTarget: SVGPathElement;
+        }, datum: Record<string | symbol, import("../types/index.js").RawValue>, index: number) => void;
+        onmouseleave: (event: Event & {
+            currentTarget: SVGPathElement;
+        }, datum: Record<string | symbol, import("../types/index.js").RawValue>, index: number) => void;
+        onmouseout: (event: Event & {
+            currentTarget: SVGPathElement;
+        }, datum: Record<string | symbol, import("../types/index.js").RawValue>, index: number) => void;
+        onmouseover: (event: Event & {
+            currentTarget: SVGPathElement;
+        }, datum: Record<string | symbol, import("../types/index.js").RawValue>, index: number) => void;
+        onpointercancel: (event: Event & {
+            currentTarget: SVGPathElement;
+        }, datum: Record<string | symbol, import("../types/index.js").RawValue>, index: number) => void;
+        onpointerdown: (event: Event & {
+            currentTarget: SVGPathElement;
+        }, datum: Record<string | symbol, import("../types/index.js").RawValue>, index: number) => void;
+        onpointerup: (event: Event & {
+            currentTarget: SVGPathElement;
+        }, datum: Record<string | symbol, import("../types/index.js").RawValue>, index: number) => void;
+        onpointerenter: (event: Event & {
+            currentTarget: SVGPathElement;
+        }, datum: Record<string | symbol, import("../types/index.js").RawValue>, index: number) => void;
+        onpointerleave: (event: Event & {
+            currentTarget: SVGPathElement;
+        }, datum: Record<string | symbol, import("../types/index.js").RawValue>, index: number) => void;
+        onpointermove: (event: Event & {
+            currentTarget: SVGPathElement;
+        }, datum: Record<string | symbol, import("../types/index.js").RawValue>, index: number) => void;
+        onpointerover: (event: Event & {
+            currentTarget: SVGPathElement;
+        }, datum: Record<string | symbol, import("../types/index.js").RawValue>, index: number) => void;
+        onpointerout: (event: Event & {
+            currentTarget: SVGPathElement;
+        }, datum: Record<string | symbol, import("../types/index.js").RawValue>, index: number) => void;
+        ondrag: (event: Event & {
+            currentTarget: SVGPathElement;
+        }, datum: Record<string | symbol, import("../types/index.js").RawValue>, index: number) => void;
+        ondrop: (event: Event & {
+            currentTarget: SVGPathElement;
+        }, datum: Record<string | symbol, import("../types/index.js").RawValue>, index: number) => void;
+        ondragstart: (event: Event & {
+            currentTarget: SVGPathElement;
+        }, datum: Record<string | symbol, import("../types/index.js").RawValue>, index: number) => void;
+        ondragenter: (event: Event & {
+            currentTarget: SVGPathElement;
+        }, datum: Record<string | symbol, import("../types/index.js").RawValue>, index: number) => void;
+        ondragleave: (event: Event & {
+            currentTarget: SVGPathElement;
+        }, datum: Record<string | symbol, import("../types/index.js").RawValue>, index: number) => void;
+        ondragover: (event: Event & {
+            currentTarget: SVGPathElement;
+        }, datum: Record<string | symbol, import("../types/index.js").RawValue>, index: number) => void;
+        ondragend: (event: Event & {
+            currentTarget: SVGPathElement;
+        }, datum: Record<string | symbol, import("../types/index.js").RawValue>, index: number) => void;
+        ontouchstart: (event: Event & {
+            currentTarget: SVGPathElement;
+        }, datum: Record<string | symbol, import("../types/index.js").RawValue>, index: number) => void;
+        ontouchmove: (event: Event & {
+            currentTarget: SVGPathElement;
+        }, datum: Record<string | symbol, import("../types/index.js").RawValue>, index: number) => void;
+        ontouchend: (event: Event & {
+            currentTarget: SVGPathElement;
+        }, datum: Record<string | symbol, import("../types/index.js").RawValue>, index: number) => void;
+        ontouchcancel: (event: Event & {
+            currentTarget: SVGPathElement;
+        }, datum: Record<string | symbol, import("../types/index.js").RawValue>, index: number) => void;
+        oncontextmenu: (event: Event & {
+            currentTarget: SVGPathElement;
+        }, datum: Record<string | symbol, import("../types/index.js").RawValue>, index: number) => void;
+        onwheel: (event: Event & {
+            currentTarget: SVGPathElement;
+        }, datum: Record<string | symbol, import("../types/index.js").RawValue>, index: number) => void;
         class: string;
         style: string;
-        cursor: import("../types").ConstantAccessor<import("csstype").Property.Cursor, Record<string | symbol, import("../types").RawValue>>;
+        cursor: import("../types/index.js").ConstantAccessor<import("csstype").Property.Cursor, Record<string | symbol, import("../types/index.js").RawValue>>;
+        title: import("../types/index.js").ConstantAccessor<string, Record<string | symbol, import("../types/index.js").RawValue>>;
     }> & {
-        data?: Record<string | symbol, import("../types").RawValue>[] | undefined;
-        x?: import("../types").ChannelAccessor<Record<string | symbol, import("../types").RawValue>>;
-        y?: import("../types").ChannelAccessor<Record<string | symbol, import("../types").RawValue>>;
-        z?: import("../types").ChannelAccessor<Record<string | symbol, import("../types").RawValue>>;
+        data?: Record<string | symbol, import("../types/index.js").RawValue>[] | undefined;
+        x?: import("../types/index.js").ChannelAccessor<Record<string | symbol, import("../types/index.js").RawValue>>;
+        y?: import("../types/index.js").ChannelAccessor<Record<string | symbol, import("../types/index.js").RawValue>>;
+        z?: import("../types/index.js").ChannelAccessor<Record<string | symbol, import("../types/index.js").RawValue>>;
         outlineStroke?: string;
         outlineStrokeWidth?: number;
         outlineStrokeOpacity?: number;
-        curve?: import("../types").CurveName | import("d3-shape").CurveFactory | "auto";
+        curve?: import("../types/index.js").CurveName | import("d3-shape").CurveFactory | "auto";
         tension?: number;
-        sort?: import("../types").ConstantAccessor<import("../types").RawValue, Record<string | symbol, import("../types").RawValue>> | {
+        sort?: import("../types/index.js").ConstantAccessor<import("../types/index.js").RawValue, Record<string | symbol, import("../types/index.js").RawValue>> | {
             channel: "stroke" | "fill";
         };
-        text?: import("../types").ConstantAccessor<string, Record<string | symbol, import("../types").RawValue>>;
-        textFill?: import("../types").ConstantAccessor<string, Record<string | symbol, import("../types").RawValue>>;
-        textStroke?: import("../types").ConstantAccessor<string, Record<string | symbol, import("../types").RawValue>>;
-        textStartOffset?: import("../types").ConstantAccessor<string, Record<string | symbol, import("../types").RawValue>>;
-        textStrokeWidth?: import("../types").ConstantAccessor<number, Record<string | symbol, import("../types").RawValue>>;
-        lineClass?: import("../types").ConstantAccessor<string, Record<string | symbol, import("../types").RawValue>>;
+        text?: import("../types/index.js").ConstantAccessor<string, Record<string | symbol, import("../types/index.js").RawValue>>;
+        textFill?: import("../types/index.js").ConstantAccessor<string, Record<string | symbol, import("../types/index.js").RawValue>>;
+        textStroke?: import("../types/index.js").ConstantAccessor<string, Record<string | symbol, import("../types/index.js").RawValue>>;
+        textStartOffset?: import("../types/index.js").ConstantAccessor<string, Record<string | symbol, import("../types/index.js").RawValue>>;
+        textStrokeWidth?: import("../types/index.js").ConstantAccessor<number, Record<string | symbol, import("../types/index.js").RawValue>>;
+        lineClass?: import("../types/index.js").ConstantAccessor<string, Record<string | symbol, import("../types/index.js").RawValue>>;
         canvas?: boolean;
     }, "data" | "x"> & {
+        /** the input data array */
         data: Datum[];
     };
     exports: {};

package/dist/marks/Link.svelte

@@ -2,24 +2,26 @@
     Creates connections between pairs of points with optional curve styling and markers
 -->
 
-<script lang="ts" generics="Datum extends DataRecord">
+<script lang="ts" generics="Datum = DataRecord | GeoJSON.GeoJsonObject">
     interface LinkMarkProps extends BaseMarkProps<Datum>, MarkerOptions {
-        data: Datum[];
-        sort?: ConstantAccessor<RawValue> | { channel: 'stroke' | 'fill' };
+        /** the input data array; each element becomes one link */
+        data?: Datum[];
+        /** sort order for data points before rendering */
+        sort?: ConstantAccessor<RawValue, Datum> | { channel: 'stroke' | 'fill' };
         /**
          * the x1 channel accessor for the start of the link
          */
-        x1: ChannelAccessor<Datum>;
+        x1?: ChannelAccessor<Datum>;
         /**
          * the y1 channel accessor for the start of the link
          */
-        y1: ChannelAccessor<Datum>;
+        y1?: ChannelAccessor<Datum>;
         /**
          * the x2 channel accessor for the end of the link
          */
-        x2: ChannelAccessor<Datum>;
-
-        y2: ChannelAccessor<Datum>;
+        x2?: ChannelAccessor<Datum>;
+        /** the y2 channel accessor for the end of the link */
+        y2?: ChannelAccessor<Datum>;
         /**
          * the curve type, defaults to 'auto' which uses a linear curve for planar projections
          * and a spherical line for geographic projections
@@ -29,10 +31,20 @@
          * the tension of the curve, defaults to 0
          */
         tension?: number;
+        /** legacy alias for link curvature */
+        bend?: number | boolean;
         /**
          * the text label for the link, can be a constant or a function
          */
         text?: ConstantAccessor<string, Datum>;
+        /** the fill color for the text label rendered along the link */
+        textFill?: ConstantAccessor<string, Datum>;
+        /** the stroke color for the text label rendered along the link */
+        textStroke?: ConstantAccessor<string, Datum>;
+        /** the offset position for the text label along the link path */
+        textStartOffset?: ConstantAccessor<string, Datum>;
+        /** the stroke width for the text label rendered along the link */
+        textStrokeWidth?: ConstantAccessor<number, Datum>;
     }
     import type {
         DataRecord,
@@ -48,8 +60,8 @@
     import Mark from '../Mark.svelte';
     import MarkerPath from './helpers/MarkerPath.svelte';
     import { replaceChannels } from '../transforms/rename.js';
-    import { line, type CurveFactory } from 'd3-shape';
-    import callWithProps from '../helpers/callWithProps.js';
+    import { line, type CurveFactory, type Line as D3Line } from 'd3-shape';
+    import type { MarkerShape } from './helpers/Marker.svelte';
     import { maybeCurve } from '../helpers/curves.js';
     import { geoPath } from 'd3-geo';
     import { pick } from 'es-toolkit';
@@ -67,6 +79,7 @@
         data = [{} as Datum],
         curve = 'auto',
         tension = 0,
+        bend,
         text,
         class: className = '',
         ...options
@@ -80,9 +93,9 @@
     const args = $derived(
         replaceChannels(
             sort({
-                data: indexData(data),
+                data: indexData(data as object[]) as DataRecord[],
                 stroke: 'currentColor',
-                ...options
+                ...(options as BaseMarkProps<DataRecord>)
             }),
             { y: ['y1', 'y2'], x: ['x1', 'x2'] }
         )
@@ -90,39 +103,44 @@
 
     const sphericalLine = $derived(plot.scales.projection && curve === 'auto');
 
-    const linePath: (d: ScaledDataRecord, reversed: boolean) => string = $derived.by(() => {
-        const fn = callWithProps(line, [], {
-            curve: maybeCurve(curve === 'auto' ? 'linear' : curve, tension),
-            x: (d) => d[0],
-            y: (d) => d[1]
-        });
+    const linePath: (d: ScaledDataRecord, reversed?: boolean) => string | null = $derived.by(() => {
+        const fn: D3Line<[number, number]> = line<[number, number]>()
+            .curve(
+                maybeCurve(
+                    curve === 'auto' ? 'linear' : curve,
+                    bend === true ? 0.6 : bend === false ? 0 : (bend ?? tension ?? 0)
+                )
+            )
+            .x((d) => d[0])
+            .y((d) => d[1]);
 
         return (d: ScaledDataRecord, reversed = false) =>
             fn(
                 reversed
                     ? [
-                          [d.x2, d.y2],
-                          [d.x1, d.y1]
+                          [d.x2 as number, d.y2 as number],
+                          [d.x1 as number, d.y1 as number]
                       ]
                     : [
-                          [d.x1, d.y1],
-                          [d.x2, d.y2]
+                          [d.x1 as number, d.y1 as number],
+                          [d.x2 as number, d.y2 as number]
                       ]
             );
     });
 
-    const sphericalLinePath: (d: ScaledDataRecord, reversed: boolean) => string = $derived.by(
-        () => {
+    const sphericalLinePath: (d: ScaledDataRecord, reversed?: boolean) => string | null =
+        $derived.by(() => {
             const fn = sphereLine(plot.scales.projection);
             return (d: ScaledDataRecord, reversed = false) => {
                 const x1 = resolveChannel('x1', d.datum, args);
                 const y1 = resolveChannel('y1', d.datum, args);
                 const x2 = resolveChannel('x2', d.datum, args);
                 const y2 = resolveChannel('y2', d.datum, args);
-                return reversed ? fn(x2, y2, x1, y1) : fn(x1, y1, x2, y2);
+                return reversed
+                    ? fn(x2 as number, y2 as number, x1 as number, y1 as number)
+                    : fn(x1 as number, y1 as number, x2 as number, y2 as number);
             };
-        }
-    );
+        });
     //     sphericalLine
     //         ?
 
@@ -130,7 +148,7 @@
     //         :
     // );
 
-    function sphereLine(projection) {
+    function sphereLine(projection: any) {
         const path = geoPath(projection);
         return (x1: number, y1: number, x2: number, y2: number) => {
             return path({
@@ -165,10 +183,10 @@
                         d,
                         {
                             textAnchor: 'middle',
-                            ...pick(args, ['fontSize', 'fontWeight', 'fontStyle', 'textAnchor']),
-                            fill: args.textFill || args.stroke,
-                            stroke: args.textStroke,
-                            strokeWidth: args.textStrokeWidth
+                            ...pick(args, ['fontSize', 'fontWeight', 'fontStyle']),
+                            fill: options.textFill || args.stroke,
+                            stroke: options.textStroke,
+                            strokeWidth: options.textStrokeWidth
                         },
                         'fill',
                         usedScales
@@ -176,21 +194,27 @@
 
                     <MarkerPath
                         mark={{ ...mark, options: args }}
+                        transform=""
                         scales={plot.scales}
-                        markerStart={args.markerStart}
-                        markerEnd={args.markerEnd}
-                        marker={args.marker}
-                        markerScale={args.markerScale}
-                        class={styleClass}
-                        strokeWidth={args.strokeWidth}
-                        datum={d.datum}
-                        color={d.stroke}
-                        d={sphericalLine ? sphericalLinePath(d) : linePath(d)}
-                        dInv={sphericalLine ? sphericalLinePath(d, true) : linePath(d, true)}
-                        {style}
-                        text={text ? resolveProp(text, d.datum) : null}
-                        startOffset={resolveProp(args.textStartOffset, d.datum, '50%')}
-                        {textStyle}
+                        markerStart={options.markerStart as boolean | MarkerShape | undefined}
+                        markerEnd={options.markerEnd as boolean | MarkerShape | undefined}
+                        marker={options.marker as boolean | MarkerShape | undefined}
+                        markerScale={options.markerScale}
+                        class={styleClass ?? undefined}
+                        strokeWidth={options.strokeWidth as ConstantAccessor<number>}
+                        datum={d.datum as DataRecord}
+                        color={d.stroke ?? 'currentColor'}
+                        d={(sphericalLine ? sphericalLinePath(d) : linePath(d)) ?? ''}
+                        dInv={(sphericalLine ? sphericalLinePath(d, true) : linePath(d, true)) ??
+                            undefined}
+                        style={style ?? ''}
+                        text={text ? ((resolveProp(text, d.datum as Datum) as string) ?? '') : ''}
+                        startOffset={(resolveProp(
+                            options.textStartOffset,
+                            d.datum as Datum,
+                            '50%'
+                        ) as string) ?? '50%'}
+                        textStyle={textStyle ?? ''}
                         {textStyleClass} />
                 {/if}
             {/each}