Argument of type is not assignable to string

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.

Gerardo Furtado · Accepted Answer · 2019-12-23 04:20:23Z

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, i.e., 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>

answered Dec 23, 2019 at 4:20

Gerardo Furtado

102k9 gold badges128 silver badges178 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Nihar Over a year ago

Thank you so much for your help. I was thinking this nested data as the problem but wasn't sure.

Collectives™ on Stack Overflow

Argument of type is not assignable to string

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related