d3 从角度中选择答案

【问题标题】：d3 select from angulard3 从角度中选择
【发布时间】：2018-02-10 06:37:36
【问题描述】：

我在 angular 1.x 中有一个指令，我在其中创建了 d3 饼图。我想向它添加一些文本，所以在我写的链接函数中：

 var svg = d3.select(element).selectAll('svg');
 var donut = svg.selectAll('g.nv-slice').filter(
                                    function (d, i) {
                                    return i == 0;
                                }
                            );
 donut.insert('text', 'g')
      .text('Line One')
      .attr('class', 'middle')
      .attr('text-anchor', 'middle')
      .attr('dy', '-.55em')
      .style('fill', '#000');

但我得到一个错误：Uncaught TypeError: n.querySelectorAll is not a function 如果我将 svg 设为var svg = d3.select('svg');，则不会出现此类错误，但我希望 d3 仅从当前指令元素中进行选择

小提琴：http://jsfiddle.net/bnUY9/26/

【问题讨论】：

这个控制台在链接中的作用是什么。 var svg = d3.select(element).selectAll('svg'); console.log(svg.node()) 另一个问题为什么 selectAll 你可能只有一个 svg var svg = d3.select(element).select('svg') 请澄清
console.log(svg.node()) 无效，因为代码在前一行失败。我试过var svg = d3.select(element).select('svg') 但结果是一样的
好的，如果你能提供一个小提琴会更好。如果你把它放在链接函数的第一行，这会打印什么console.log(d3.select(element).node())
问题是我希望 d3 不是从文档中选择 svg 而是从指令元素中选择
console.log(d3.select(element).node()): [idea-chart-view.query-component__widget.ng-scope.ng-isolate-scope, context: idea-chart-view.query-component__widget.ng-scope.ng-isolate-scope]

标签： javascript angularjs d3.js svg

【解决方案1】：

我使用var selection = d3.selectAll($element);解决了我的问题

http://jsfiddle.net/bnUY9/27/

【讨论】：