类型参数不可分配给字符串

Question

I have a formatted json data that I want to use in d3 to draw a hierarchy. It was working with old data but after adding more dimension in the json data, its giving following error.

Argument of type '{ name: string; children: { group: number; name: string; }[]; group: number; }[]' is not assignable to parameter of type 'readonly string[]'. Type '{ name: string; children: { group: number; name: string; }[]; group: number; }' is not assignable to type 'string'.

The output of my reformatted data is following which is generated by using the code from @Dacre Denny's answer from Change Json data into new format by JavaScript link

{
  name: "program",
  children: (1)[
    {
      name: "file1",
      children: (1)[
        {
          name: "function1",
          calls: (2)[
            {
              line: 105,
              file: "file2",
              function: "function5"
            },
            {
              line: 106,
              file: "file2",
              function: "function6"
            }
          ],
          point: (2)[
            102,
            105
          ],
          point2: (3)[
            (2)[
              102,
              102
            ],
            (3)[
              105,
              106,
              107
            ],
            (2)[
              106,
              107
            ]
          ],
          group: 1
        }
      ],
      group: 1
    }
  ],
  group: 0
}

My existing code snippet for d3 is following:

const data = TestFunction.test(); //from here i am calling the reformatted output
const root = d3.hierarchy(data);

const colorScale = d3.scaleOrdinal()
        .domain(data.children) // here its showing the error.
        .range(d3.schemeCategory10);

I would really appreciate your help.

Answer 1

You cannot pass a nested array to ordinal.domain() : an ordinal scale needs to have a plain array as the domain... even more important, an array of values , ie, primitives, like strings (if you pass numbers they will be stringified anyway...). That explains your error: "Argument of type is not assignable to string " .

That being said, you can use root.descendants() to get all the children and map to get their desired properties. In your case, I'll assume that the string you want is the children's name property.

In this demo, myNames is the array you'll pass to the ordinal scale (if you don't want the root's name, remove it):

 const data = { "name": "program", "children": [{ "name": "file1", "children": [{ "name": "function1", "calls": [{ "line": 105, "file": "file2", "function": "function5" }, { "line": 106, "file": "file2", "function": "function6" } ], "lines1": [ 102, 105 ], "lines2": [ [ 102, 102 ], [ 105, 106, 107 ], [ 106, 107 ] ], "group": 1 }], "group": 1 }], "group": 0 }; const root = d3.hierarchy(data); const myNames = root.descendants().map(d => d.data.name); console.log(myNames)

 <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>