D3 linkHorizontal Аргумент не может быть назначен параметру ⇐ Javascript

[Anonymous]

Я пытаюсь создать более простую версию Tidy Tree D3 (https://observablehq.com/@d3/tree/2). Вот полный JS-файл:

Код: Выделить всё

const width = 800;
const height = 600;

const svg = d3
.select('svg')
.attr('width', width)
.attr('height', height)
.append('g')
.attr('transform', 'translate(50,50)');

const tree = d3.tree().size([height - 100, width - 200]);

const data = {
name: 'Root',
children: [
{
name: 'Child 1',
children: [{ name: 'Grandchild 1' }, { name: 'Grandchild 2' }],
},
{
name: 'Child 2',
children: [{ name: 'Grandchild 3' }, { name: 'Grandchild 4' }],
},
],
};

const root: d3.HierarchyNode = d3.hierarchy(data);

tree(root as d3.HierarchyPointNode);

svg
.selectAll('.link')
.data(root.links())
.enter()
.append('path')
.attr('class', 'link')
.attr(
'd',
d3
.linkHorizontal()
.x((d) => d.y)
.y((d) => d.x),
);

Я получаю эту ошибку в attr('d', ...):

Аргумент типа 'Link'
не может быть назначен параметру типа 'string | номер | логическое |
только для чтения (строка | число)[] | ValueFn | нулевой'. Тип «Link» не может быть присвоен типу
'ValueFn'.
Типы параметров 'd' и 'datum' несовместимы.
Введите 'HierarchyLink' не может быть присвоен типу
'DefaultLinkObject'.
Типы свойства 'source' несовместимы.
Тип 'HierarchyNode' нельзя назначить
типу '[number, Number]'.


Подробнее здесь: https://stackoverflow.com/questions/793 ... -parameter