在 selectAll 后尝试加入时如何修复“.join 不是函数”？

Question

我正在尝试使用此示例绘制 Zoomable Sunburst 图表：https ://vizhub.com/undefined/7babe7cceb394cd1bc93157a29f8c161

该代码在普通 js 中工作，但是当我尝试在 Angular 中导入它时，它会引发以下错误：

错误类型错误：“svg.selectAll(...).data(...).join 不是函数”

行抛出错误是：

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

Answer 2

我遇到过同样的问题。我通过升级到最新的 d3 版本（从 5.x 到 5.16）来修复它。