如何在生成的d3 html中使用angularjs指令？

Question

我正在d3可视化中尝试使用angularjs 工具提示指令，所以我有类似

var node = svg.selectAll(".node")
    .data(nodes)
    .enter().append("circle")
        .attr("tooltip-append-to-body", true)
        .attr("tooltip", function(d) {
            return d.name;
        })
// ... attributes

但是，工具提示未显示。我需要$compile什么吗？我也尝试过将它包装起来$timeout，但这没有用。

Answer 1

我有一个类似的问题，是的，用解决了$compile。我假设您的d3代码位于自定义指令中。从那里可以添加工具提示属性，删除自定义指令属性，以便$
compile仅运行一次，然后调用$ compile：

    myApp.directive('myNodes', ['$compile', function ($compile) {
    return {
        restrict: 'A',
        link: function(scope, element, attrs) {
            var nodes = [{"name": "foo"}, {"name": "bar"}] 
            var mySvg = d3.select(element[0])
                  .append("svg")
                  .attr("width", 100)
                  .attr("height", 100);

            var node = mySvg.selectAll(".node")
             .data(nodes)
             .enter()
             .append("circle")
             .attr("cx", function(d,i){
                return 20+i*50;
             })
             .attr("cy", 50)
             .attr("r", 10)
             .attr("tooltip-append-to-body", true)
             .attr("tooltip", function(d){
                 return d.name;
             });

            element.removeAttr("my-nodes");
            $compile(element)(scope);
            }
        };
    }]);

$ compile服务可确保使用指令添加的属性编译元素。

这是使用上面的代码的工作小提琴。希望这就是您要寻找的！