svelteplot · gka · Jun 2, 2025 · Jun 2, 2025 · Jun 2, 2025 · Jun 2, 2025
diff --git a/src/lib/marks/Area.svelte b/src/lib/marks/Area.svelte
@@ -29,6 +29,7 @@
     import { maybeCurve } from '$lib/helpers/curves.js';
     import { isValid } from '$lib/helpers/index.js';
     import AreaCanvas from './helpers/AreaCanvas.svelte';
+    import Anchor from './helpers/Anchor.svelte';
 
     import type {
         CurveName,
@@ -37,7 +38,6 @@
         BaseMarkProps,
         ConstantAccessor,
         ChannelAccessor,
-        FacetContext,
         ScaledDataRecord,
         LinkableMarkProps
     } from '../types.js';
@@ -113,32 +113,24 @@
         {:else}
             <GroupMultiple length={grouped.length}>
                 {#each grouped as areaData, i (i)}
-                    {#snippet el(datum: ScaledDataRecord)}
-                        {@const title = resolveProp(options.title, datum.datum, '')}
-                        {@const [style, styleClass] = resolveStyles(
-                            plot,
-                            datum,
-                            options,
-                            'fill',
-                            usedScales
-                        )}
-                        <path
-                            class={['svelteplot-area', className, styleClass]}
-                            clip-path={options.clipPath}
-                            d={areaPath(areaData)}
-                            {style}
-                            >{#if title}<title>{title}</title>{/if}</path>
-                    {/snippet}
+                    {@const datum = areaData[0]}
                     {#if areaData.length > 0}
-                        {#if options.href}
-                            <a
-                                href={resolveProp(options.href, areaData[0].datum, '')}
-                                target={resolveProp(options.target, areaData[0].datum, '_self')}>
-                                {@render el(areaData[0])}
-                            </a>
-                        {:else}
-                            {@render el(areaData[0])}
-                        {/if}
+                        <Anchor {options} {datum}>
+                            {@const title = resolveProp(options.title, datum.datum, '')}
+                            {@const [style, styleClass] = resolveStyles(
+                                plot,
+                                datum,
+                                options,
+                                'fill',
+                                usedScales
+                            )}
+                            <path
+                                class={['svelteplot-area', className, styleClass]}
+                                clip-path={options.clipPath}
+                                d={areaPath(areaData)}
+                                {style}
+                                >{#if title}<title>{title}</title>{/if}</path>
+                        </Anchor>
                     {/if}
                 {/each}
             </GroupMultiple>

diff --git a/src/lib/marks/BarX.svelte b/src/lib/marks/BarX.svelte
@@ -7,10 +7,12 @@
         PlotContext,
         BaseMarkProps,
         BaseRectMarkProps,
-        ChannelAccessor
+        ChannelAccessor,
+        LinkableMarkProps
     } from '../types.js';
 
     export type BarXMarkProps = BaseMarkProps &
+        LinkableMarkProps &
         BaseRectMarkProps & {
             data: DataRow[];
             x?: ChannelAccessor;

diff --git a/src/lib/marks/BarY.svelte b/src/lib/marks/BarY.svelte
@@ -12,6 +12,7 @@
     } from '../types.js';
 
     export type BarYMarkProps = BaseMarkProps &
+        LinkableMarkProps &
         BaseRectMarkProps & {
             data: DataRow[];
             x?: ChannelAccessor;

diff --git a/src/lib/marks/Cell.svelte b/src/lib/marks/Cell.svelte
@@ -12,6 +12,7 @@
     } from '../types.js';
 
     export type CellMarkProps = BaseMarkProps &
+        LinkableMarkProps &
         BaseRectMarkProps & {
             data: DataRecord[];
             x?: ChannelAccessor;

diff --git a/src/lib/marks/Dot.svelte b/src/lib/marks/Dot.svelte
@@ -10,7 +10,7 @@
         symbol?: ChannelAccessor | Snippet<[number, string]>;
         canvas?: boolean;
         dotClass?: ConstantAccessor<string>;
-    };
+    } & LinkableMarkProps;
 </script>
 
 <script lang="ts">
@@ -21,8 +21,8 @@
         BaseMarkProps,
         ConstantAccessor,
         ChannelAccessor,
-        FacetContext,
-        PlotDefaults
+        PlotDefaults,
+        LinkableMarkProps
     } from '../types.js';
     import { resolveProp, resolveStyles } from '../helpers/resolve.js';
     import { maybeSymbol } from '$lib/helpers/symbols.js';
@@ -33,6 +33,7 @@
     import { maybeData, isValid } from '$lib/helpers/index.js';
     import { recordizeXY } from '$lib/transforms/recordize.js';
     import { addEventHandlers } from './helpers/events.js';
+    import Anchor from './helpers/Anchor.svelte';
 
     let {
         data = [{}],
@@ -95,19 +96,21 @@
                             'stroke',
                             usedScales
                         )}
-                        <path
-                            transform="translate({d.x}, {d.y})"
-                            d={getSymbolPath(d.symbol, d.r ** 2 * Math.PI)}
-                            class={[
-                                dotClass ? resolveProp(dotClass, d.datum, null) : null,
-                                styleClass
-                            ]}
-                            {style}
-                            use:addEventHandlers={{
-                                getPlotState,
-                                options: args,
-                                datum: d.datum
-                            }} />
+                        <Anchor {options} datum={d.datum}>
+                            <path
+                                transform="translate({d.x}, {d.y})"
+                                d={getSymbolPath(d.symbol, d.r ** 2 * Math.PI)}
+                                class={[
+                                    dotClass ? resolveProp(dotClass, d.datum, null) : null,
+                                    styleClass
+                                ]}
+                                {style}
+                                use:addEventHandlers={{
+                                    getPlotState,
+                                    options: args,
+                                    datum: d.datum
+                                }} />
+                        </Anchor>
                     {/if}
                 {/each}
             {/if}

diff --git a/src/lib/marks/Frame.svelte b/src/lib/marks/Frame.svelte
@@ -7,6 +7,7 @@
         BaseMarkProps,
         'fill' | 'stroke' | 'fillOpacity' | 'strokeOpacity'
     > &
+        LinkableMarkProps &
         Omit<
             BaseRectMarkProps,
             'inset' | 'insetLeft' | 'insetRight' | 'insetTop' | 'insetBottom'
@@ -27,7 +28,7 @@
 <script lang="ts">
     import Mark from '../Mark.svelte';
     import { getContext } from 'svelte';
-    import type { PlotContext, BaseRectMarkProps } from '../types.js';
+    import type { PlotContext, BaseRectMarkProps, LinkableMarkProps } from '../types.js';
     import type { BaseMarkProps } from '../types.js';
     import RectPath from './helpers/RectPath.svelte';
 

diff --git a/src/lib/marks/Geo.svelte b/src/lib/marks/Geo.svelte
@@ -7,8 +7,10 @@
         geoType?: 'sphere' | 'graticule';
         dragRotate: boolean;
         canvas: boolean;
-        href: ConstantAccessor<string>;
-        target: ConstantAccessor<string>;
+        /**
+         * simple browser tooltip to be displayed on mouseover
+         */
+        title: ConstantAccessor<string>;
     } & BaseMarkProps &
         LinkableMarkProps;
 </script>
@@ -31,6 +33,7 @@
     import GeoCanvas from './helpers/GeoCanvas.svelte';
     import { recordize } from '$lib/transforms/recordize.js';
     import { GEOJSON_PREFER_STROKE } from '$lib/helpers/index.js';
+    import Anchor from './helpers/Anchor.svelte';
 
     const { getPlotState } = getContext<PlotContext>('svelteplot');
     const plot = $derived(getPlotState());
@@ -68,28 +71,6 @@
     channels={['fill', 'stroke', 'opacity', 'fillOpacity', 'strokeOpacity', 'r']}
     {...args}>
     {#snippet children({ mark, scaledData, usedScales })}
-        {#snippet el(d)}
-            {@const title = resolveProp(args.title, d.datum, '')}
-            {@const geometry = resolveProp(args.geometry, d.datum, d.datum)}
-            {@const [style, styleClass] = resolveStyles(
-                plot,
-                d,
-                args,
-                GEOJSON_PREFER_STROKE.has(geometry.type) ? 'stroke' : 'fill',
-                usedScales
-            )}
-            <path
-                d={path(geometry)}
-                {style}
-                class={[styleClass]}
-                use:addEventHandlers={{
-                    getPlotState,
-                    options: args,
-                    datum: d.datum
-                }}>
-                {#if title}<title>{title}</title>{/if}
-            </path>
-        {/snippet}
         <g
             aria-label="geo"
             class={['geo', geoType && `geo-${geoType}`, className]}
@@ -99,15 +80,28 @@
             {:else}
                 {#each scaledData as d, i (i)}
                     {#if d.valid}
-                        {#if options.href}
-                            <a
-                                href={resolveProp(args.href, d.datum, '')}
-                                target={resolveProp(args.target, d.datum, '_self')}>
-                                {@render el(d)}
-                            </a>
-                        {:else}
-                            {@render el(d)}
-                        {/if}
+                        <Anchor {options} datum={d.datum}>
+                            {@const title = resolveProp(args.title, d.datum, '')}
+                            {@const geometry = resolveProp(args.geometry, d.datum, d.datum)}
+                            {@const [style, styleClass] = resolveStyles(
+                                plot,
+                                d,
+                                args,
+                                GEOJSON_PREFER_STROKE.has(geometry.type) ? 'stroke' : 'fill',
+                                usedScales
+                            )}
+                            <path
+                                d={path(geometry)}
+                                {style}
+                                class={[styleClass]}
+                                use:addEventHandlers={{
+                                    getPlotState,
+                                    options: args,
+                                    datum: d.datum
+                                }}>
+                                {#if title}<title>{title}</title>{/if}
+                            </path>
+                        </Anchor>
                     {/if}
                 {/each}
             {/if}

diff --git a/src/lib/marks/Rect.svelte b/src/lib/marks/Rect.svelte
@@ -13,6 +13,7 @@
         y2?: ChannelAccessor;
         interval?: number | string;
     } & BaseMarkProps &
+        LinkableMarkProps &
         BaseRectMarkProps;
 </script>
 

diff --git a/src/lib/marks/Sphere.svelte b/src/lib/marks/Sphere.svelte
@@ -2,8 +2,8 @@
     Geo mark with Sphere geometry object  -->
 
 <script module lang="ts">
-    import { type BaseMarkProps } from '$lib/types.js';
-    export type SphereMarkProps = BaseMarkProps;
+    import { type BaseMarkProps, type LinkableMarkProps } from '$lib/types.js';
+    export type SphereMarkProps = BaseMarkProps & LinkableMarkProps;
 </script>
 
 <script lang="ts">

diff --git a/src/lib/marks/helpers/Anchor.svelte b/src/lib/marks/helpers/Anchor.svelte
@@ -0,0 +1,37 @@
+<script>
+    import { resolveProp } from '$lib/helpers/resolve';
+
+    let { datum = {}, options = {}, children } = $props();
+
+    const href = $derived(resolveProp(options.href, datum, null));
+    const target = $derived(resolveProp(options.target, datum, null));
+    const rel = $derived(resolveProp(options.rel, datum, null));
+    const type = $derived(resolveProp(options.type, datum, null));
+    const download = $derived(resolveProp(options.download, datum, null));
+
+    // filter data attributes from options
+    const dataAttributes = $derived(
+        Object.fromEntries(
+            Object.entries(options).filter(([key]) => key.startsWith('data-sveltekit-'))
+        )
+    );
+</script>
+
+{#if href}
+    <!-- we can't use <a> directly here because Svelte confuses it with the 
+ HTMLAElement which breaks the rendering -->
+    <svelte:element
+        this={'a'}
+        {href}
+        {target}
+        {rel}
+        {type}
+        {download}
+        {...dataAttributes}
+        aria-label="link"
+        xmlns="http://www.w3.org/2000/svg">
+        {@render children?.()}
+    </svelte:element>
+{:else}
+    {@render children?.()}
+{/if}
diff --git a/src/lib/marks/helpers/RectPath.svelte b/src/lib/marks/helpers/RectPath.svelte
@@ -14,6 +14,7 @@ Helper component for rendering rectangular marks in SVG
     } from 'svelteplot/types';
     import { addEventHandlers } from './events';
     import { getContext } from 'svelte';
+    import Anchor from './Anchor.svelte';
 
     let {
         datum,
@@ -101,33 +102,35 @@ Helper component for rendering rectangular marks in SVG
     );
 </script>
 
-{#if hasBorderRadius}
-    <path
-        transform="translate({x + dx + insetLeft},{y + insetBottom + dy})"
-        d={roundedRect(
-            0,
-            0,
-            width - insetLeft - insetRight,
-            height - insetTop - insetBottom,
-            borderRadius
-        )}
-        class={[styleClass, className]}
-        {style}
-        use:addEventHandlers={{
-            getPlotState,
-            options,
-            datum: datum?.datum
-        }} />
-{:else}
-    <rect
-        transform="translate({x + dx + insetLeft},{y + insetBottom + dy})"
-        width={width - insetLeft - insetRight}
-        height={height - insetTop - insetBottom}
-        class={[styleClass, className]}
-        {style}
-        use:addEventHandlers={{
-            getPlotState,
-            options,
-            datum: datum?.datum
-        }} />
-{/if}
+<Anchor {options} datum={datum?.datum}>
+    {#if hasBorderRadius}
+        <path
+            transform="translate({x + dx + insetLeft},{y + insetBottom + dy})"
+            d={roundedRect(
+                0,
+                0,
+                width - insetLeft - insetRight,
+                height - insetTop - insetBottom,
+                borderRadius
+            )}
+            class={[styleClass, className]}
+            {style}
+            use:addEventHandlers={{
+                getPlotState,
+                options,
+                datum: datum?.datum
+            }} />
+    {:else}
+        <rect
+            transform="translate({x + dx + insetLeft},{y + insetBottom + dy})"
+            width={width - insetLeft - insetRight}
+            height={height - insetTop - insetBottom}
+            class={[styleClass, className]}
+            {style}
+            use:addEventHandlers={{
+                getPlotState,
+                options,
+                datum: datum?.datum
+            }} />
+    {/if}
+</Anchor>