Блог

Главная - Вопросы по программированию - Типизация Typescript D3.js DefaultArcObject

Типизация Typescript D3.js DefaultArcObject

#javascript #typescript #d3.js

#javascript #typescript #d3.js

Вопрос:

В настоящее время я использую определения типов, загруженные из этого пакета. Мой код пытается установить d svg атрибут path элемента, используя arc сгенерированный D3.js .

Мой код выглядит следующим образом:

 const pie = d3.pie<SomeDataInterface>()
        .value((d) => d.dataVal);

const arc = g.selectAll(".arc")
        .data(pie(mockData));

const path = d3.arc();

arc.append("path")
        .attr("d", path); // >> Where compilation fails

Однако я получаю эту ошибку компиляции:

 TypeScript error: Argument of type 'Arc<any, DefaultArcObject>' is not assignable to parameter of type 'ValueFn<SVGPathElement, PieArcDatum<ID3Data>, string | number | boolean | null>'.
  Types of parameters 'd' and 'datum' are incompatible.

Глядя на здесь пример, кажется, что я могу просто объявить <any> тип в path объявлении. Аналогичным образом, я также попытался импортировать определение типа, Arc используя import { Arc } from "d3-shape"; которое содержит фактическое определение типа, и присвоить его следующим образом:

 .attr("d", <Arc>path)

о котором также получает предупреждения о компиляции. Есть идеи, какой тип мне может не хватать и где конкретно?

Обновить

Этот фрагмент кода отрабатывает показанный здесь пример.

Комментарии:

1. Не знаком с d3.js , но пытаетесь ли вы добавить ранее созданный объект Arc как Datum ? Разве этот второй аргумент не должен быть чем-то другим?

2. @Cristy да, этот путь необходимо передать в d attr пути, я добавил пример к своему вопросу, иллюстрирующий пример кода, с которым я работаю.

Ответ №1:

Хотя прошло три года с тех пор, как был задан вопрос, чтобы помочь тем, кто придет позже, я хотел бы поделиться решением здесь.

Чтобы решить эту проблему, нам нужно изменить общий параметр d3.arc . Предполагая, что наш тип данных SomeDataInterface , общий параметр должен быть записан следующим образом:

 d3.arc<d3.PieArcDatum<SomeDataInterface>>()

Ключ в том, чтобы использовать d3.PieArcDatum<> для переноса нашего типа данных.