[Solved]-How to use d3.js Hierarchy with custom data structure?-d3.js

You probably want to name and organize your data following what d3.hierarchy is expecting, look at documentation here

The returned node and each descendant has the following properties:

node.data - the associated data, as specified to the constructor.
node.depth - zero for the root node, and increasing by one for each descendant generation.
node.height - zero for leaf nodes, and the greatest distance from any descendant leaf for internal nodes.
node.parent - the parent node, or null for the root node.
node.children - an array of child nodes, if any; undefined for leaf nodes.
node.value - the summed value of the node and its descendants; optional, see node.sum and node.count.

So your data should be like:

let data = {
name: 'root',
children: [{
 name: 'foods A',
 children: [
   {
    name: 'fruits',
    children: [
        { name: 'Apple', size: 1 },
        { name: 'Banana', size: 1 },
        { name: 'Orange', size: 3 },
    ],
  label: 'fruits',
  size: 3,
}]},
{
name: 'foods B',
children: [
  {
    name: 'vegetables',
    children: [
        { name: 'Potato', size: 2 },
        { name: 'Carrot', size: 4 }
    ],
    label: 'vegetables',
    size: 2
 }]
}]
}