Typing a general d3 selection to target various types of SVG elements

Question

Typing a general d3 selection to target various types of SVG elements

I am looking for a callback function that can be utilized with both rect and circle elements.

Here is an example:

function commonTasks(selection:d3.Selection<PLACEHOLDER_TYPE, MyDataType, SVGGElement, unknown>) {
  selection
    .classed('my-class1', true)
    .classed('my-class2', true)
}

This function should be callable on both rect and circle elements like this:

nodes.append('rect').call(commonTasks)
nodes.append('circle').call(commonTasks)

The documentation for d3.Selection states that

The first generic "GElement" refers to the type of the selected element(s).

However, the challenge I'm facing is determining what to set as that type (referred to as PLACEHOLDER_TYPE above) in order to encompass both SVGRectElement and SVGCircleElement.

If I set it to just SVGRectElement, I encounter the error

Type 'SVGCircleElement' is not assignable to type 'SVGRectElement'

and vice versa.

Setting it to SVGRectElement|SVGCircleElement results in the same error.

Even setting it to their common parent, SVGGraphicsElement, leads to the same issue.

I have a suspicion that I should be passing a generic parameter somehow, but my knowledge of TypeScript is insufficient to resolve this.

typescript d3.js

Answer 1

Answer №1

If you want to achieve a similar result, you can try this method:

function applyStyling<GElement extends d3.BaseType, Datum>(
    elements: d3.Selection<GElement, Datum, HTMLElement, any>
) {
    elements
        .classed("custom-class1", true)
        .classed("custom-class2", true);
}

Here is an example of how you can use it:

let shapes = d3.select("svg");

shapes.append('rect').call(applyStyling);
shapes.append('circle').call(applyStyling);

Answer 2

If you want to achieve a similar result, you can try this method:

function applyStyling<GElement extends d3.BaseType, Datum>(
    elements: d3.Selection<GElement, Datum, HTMLElement, any>
) {
    elements
        .classed("custom-class1", true)
        .classed("custom-class2", true);
}

Here is an example of how you can use it:

let shapes = d3.select("svg");

shapes.append('rect').call(applyStyling);
shapes.append('circle').call(applyStyling);

Typing a general d3 selection to target various types of SVG elements

Answer №1

Similar questions

What are the steps to set up a dictionary with predetermined values?

How can you customize the appearance of the filledInput component within a TextField component in Material UI?

Accessing React.FC in Another File with TypeScript - A Step-by-Step Guide

Is it possible to assign a string literal type as a key in TypeScript mappings?

Leveraging --expose-gc for TypeScript when working with ts-node or tsx

First, download a npm package and integrate it into TSX files

"Unindexing data in Angular: A step-by-step guide

Utilizing an Angular component for multiple purposes

Adding custom type definitions for an untyped npm module in TypeScript 2

Using Material UI Slider along with Typescript for handling onChange event with either a single number or an

Failed to import due to an error from the downloaded dependency

Ways of modifying the readonly and required attributes of an HTML element using Angular2 Typescript

The @ViewChild in Angular 2 seems to be unable to detect the BaseChartDirective from the ng2-charts

There is an issue with the typings for React.createElement that is causing errors

TypeScript abstract class generics: `Class<?>` type

What are some ways to utilize tuples in TypeScript along with generics?

A gojs swim lane diagram requires a date axis to provide accurate time representation

Exploring the integration of Server-Sent Events in Angular

Creating Production Files for Web using RxJs and TypeScript

Encountering error code TS1003 while trying to access object properties using bracket notation in Typescript