How to fix ".join is not a function" when trying join after selectAll?

Question

I'm trying to plot Zoomable SUnburst chart using this example: https://vizhub.com/undefined/7babe7cceb394cd1bc93157a29f8c161

The code is working in normal js but when I try to import it in Angular, it throws the following error:

ERROR TypeError: "svg.selectAll(...).data(...).join is not a function"

The line throwing error is :

const path = svg.selectAll('path')
      .data(root.descendants().slice(1))
      .join('path')
      .attr('fill', d => {
        while (d.depth > 1) { d = d.parent; }
        return color(d.data.name);
      })
      .attr('fill-opacity', d => arcVisible(d.current) ? (d.children ? 0.6 : 0.4) : 0)
      .attr('d', d => arc(d.current));

I tried adding class to svg element but it doesn't help. Removing it doesn't render the graph and every join throws the error. Also, updated to latest d3, but it doesn't help Angular version is 6.

Console log of

g.append('g')
 .selectAll('path')
 .data(root.descendants().slice(1))

Answer 1

Replace join('path') with enter().append('path')

Answer 2

I had the same issue. I fixed it by upgrading to the latest d3 version (from 5.x to 5.16).