最新版本的 angularjs 和 d3js 支持 SVG

Question

我想报告一起使用 angularjs 和 d3js 时的一个相当奇怪的行为。以下 plunker 说明了这一点：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());
            });

        }
    }
});         

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

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

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

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

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

提前感谢您的热心帮助！

Answer 1

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

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

这似乎与Angular issue #7383有关，它似乎是在1.2.16版本中引入的。

我看到 1.3 分支（尚未发布）有一个即将推出的 feature #7265 来恢复此支持：

以前，模板总是被假定为有效的 HTML 节点。在某些情况下，最好使用 SVG 或 MathML 或其他一些语言。

要在 Angular 1.2.x 中解决这个问题，您可以简单地从指令中删除模板属性，然后从 D3 代码创建 SVG 节点：

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