我如何使用生成的HTML D3指令angularjs？ [英] How do I use angularjs directives in generated d3 html?

问题描述

我试图用angularjs 提示指令在我的D3的可视化，所以我有什么喜欢

I'm trying to use the angularjs tooltip directive on my d3 visualisation, so I have something like

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

不过，工具提示不显示。我需要 $编译还是什么？我试着它包裹 $超时过，但没有奏效。

However, the tooltips are not showing. Do I need to $compile or something? I've tried wrapping it around $timeout too, but that didn't work.

推荐答案

我也有类似的问题，是的，用 $解决它编译。我假设你D3 code是一个自定义指令中。从那里，你可以添加你提示的属性，删除自定义指令属性，这样$编译只运行一次，并且调用$编译：

I had a similar problem and yes, solved it with $compile. I'm assuming your d3 code is inside a custom directive. From there you can add your tooltip attributes, remove your custom directive attribute so $compile only runs once, and call $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);
            }
        };
    }]);

在$编译服务可以确保你的元素被编译与您的指令添加的属性。

The $compile service makes sure your element is compiled with the attributes added by your directive.

这里是一个工作的小提琴使用上述code。希望这是你在找什么！

Here is a working fiddle using the above code. Hope it's what you're looking for!

这篇关于我如何使用生成的HTML D3指令angularjs？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！