Javascript 最新版本的angularjs和d3js支持SVG

我想报告在联合使用angularjs和d3js时的一个相当奇怪的行为。下面的plunker说明了这一点：

以下是完成大部分工作的指令：

.directive('element1', function() {
    return {
        restrict: 'E',
        replace: true,
        template: '<svg></svg>',
        link: function (scope, element, attrs) {
          var rootElmt = d3.select(element[0]);
          rootElmt.append("g")
            .selectAll("text")
            .data(["Hello World"])
            .enter()
            .append("text")
            .attr("x", 20)
            .attr("y", 20)
            .text(function(d) {
              return d;
            });

          rootElmt.selectAll("text")[0]
            .forEach(function(d) {
              console.log("text length: ", d.getComputedTextLength());
            });

        }
    }
});         

.directive（'element1'，function（）{
返回{
限制：'E'，
替换：正确，
模板：“”，
链接：函数（范围、元素、属性）{
var rootElmt=d3.select（元素[0]）；
rootElmt.append（“g”）
.selectAll（“文本”）
.data（[“Hello World”]）
.输入（）
.append（“文本”）
.attr（“x”，20）
.attr（“y”，20）
.文本（功能（d）{
返回d；
});
rootElmt.selectAll（“文本”）[0]
.forEach（功能（d）{
log（“文本长度：”，d.getComputedTextLength（））；
});
}
}
});         

您肯定会注意到，自定义元素指令element1仅基于获得的结果就做了大量不必要的工作-实际上，我隔离了一个更复杂的软件中出现的问题的核心，在某种程度上需要此设备

plunker生成预期结果，即显示SVG文本字符串，并记录应用于后者的getComputedTextLength（）的结果。plunker使用angularjs v1.2.0rc3

现在，如果您对1.2.0rc3脚本加载子句进行注释，并取消对1.2.17（即相当新的版本）的注释，则代码会遇到错误，原因是getComputedTextLength未定义

此错误可以追溯到文本对象的属性：虽然SVGTextElement对象提供了angular的较旧版本（即来自SVG原型链），但较新版本带来了HtmlUnknowneElement对象-导致明显缺少getComputedTextLength方法

这可能是angularjs和d3之间复杂交互的原因吗？也许我的指令代码不符合最近的angularjs最佳实践

---

提前感谢您的热心帮助

问题的根源在于您正在Angular模板中创建SVG节点，而不是遵从D3代码在指令中创建它：

template: '<svg></svg>',

---

相应地更新我的plunk确实解决了这个问题！感谢您的解决方案和所有的历史！

// create it here instead:
var rootElmt = d3.select(element[0]).append('svg');