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

Question

我正在尝试使用 angularjs tooltip directive在我的 d3 可视化中，所以我有类似的东西

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 服务确保您的元素是使用指令添加的属性进行编译的。

Here is a working fiddle使用上面的代码。希望这就是您正在寻找的!