Свойство 'x' не существует для типа 'HierarchyNode <any>'

Question

import React, { useRef, useEffect } from "react";
import { select, hierarchy, tree } from "d3";

function ThreeChart({ data }: any) {
  const svgRef = useRef(null);
  const wrapperRef = useRef(null);

  useEffect(() => {
    const svg = select(svgRef.current);

    const root = hierarchy(data);
    svg
      .selectAll(".node")
      .data(root.descendants())
      .join("circle")
      .attr("class", "node")
      .attr("fill", "black").attr("cx", node => node.x) // Property 'x' does not exist 
      .attr("r", 4)
  }, [data]);

  return (
    <div ref={wrapperRef} style={{ marginBottom: "2rem" }}>
      <svg ref={svgRef}></svg>
    </div>
  );
}

export default ThreeChart;

Я думаю, что это довольно просто и понятно, но, поскольку я новичок в машинописи, мне кажется, что я не могу понять, что и где мне следует объявлять мои типы, я уже пробовал это, но это не работает:

interface DataProps {
  children: DataProps[];
  depth: number;
  height: number;
  x: number;
  y: number;
  data: Data
}
interface Data {
  name: string;
  children: Data[]
}

данные прохода выглядят следующим образом:

const data = {
  name: "1",
  children: [
    {
      name: "1.1",
      children: [
        {
          name: "1.1.1",
        },
        {
          name: "1.1.2",
        },
        {
          name: "1.1.3",
        },
      ],
    },
    {
      name: "1.2",
    },
  ],
};

Это console.log (root):

Answer 1

const data = {
name: "1",
children: [
  {
  name: "1.1",
  children: [
    {
      name: "1.1.1",
    },
    {
      name: "1.1.2",
    },
    {
      name: "1.1.3",
    },
  ],
},
{
  name: "1.2",
},
],
};

Объект данных не содержит поля x, как я вижу, он содержит только поля name и child. Поэтому вы должны установить поле x и только потом использовать его