CODEWITHSUNDEEP
typescriptd3.jstypescript-typings
Yuri Taratorkin
Yuri Taratorkin

Reputation: 647

d3 and Typescript. selection.merge types problem

I am trying to implement d3 enter,update,delete pattern with typescript

Source: https://codesandbox.io/s/brave-banach-g1h51?file=/src/index.ts

import { select } from "d3-selection";

const chart = select("#chart");

const values = [1, 2, 3, 4, 5];

const node = chart.selectAll("g.node").data(values);
const nodeEnter = node
  .enter()
  .append("g")
  .attr("class", "node");

// Type Error here
const nodeUpdate = nodeEnter.merge(node);

node.exit().remove();

But I got error on this sting:

enter image description here

Argument of type 
'Selection<BaseType, number, BaseType, unknown>' is not assignable to parameter of type 
'Selection<SVGGElement, number, BaseType, unknown>'.
Types of property 'select' are incompatible.

How can I fix it?

Upvotes: 1

Views: 1360

Answers (1)

Yuri Taratorkin
Yuri Taratorkin

Reputation: 647

I found solution.

Changin

const node = chart.selectAll("g.node").data(values);

to

const node = chart.selectAll<SVGGElement, number[]>("g.node").data(values);

is solving type mismatch.

Upvotes: 4

Related Questions