angular - 在 selectAll 之后尝试加入时如何修复 ".join is not a function"？

Question

我正在尝试使用以下示例绘制可缩放 SUnburst 图表:https://vizhub.com/undefined/7babe7cceb394cd1bc93157a29f8c161

该代码可以在正常的 js 中运行，但是当我尝试在 Angular 中导入它时，它会抛出以下错误:

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

抛出错误的是:

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));

我尝试向 svg 元素添加类，但没有帮助。删除它不会渲染图形，并且每个连接都会引发错误。另外，更新到最新的d3，但没有帮助Angular 版本是 6。

控制台日志

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

Answer 1

将 join('path') 替换为 enter().append('path')