我正在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,但这没有用。
$compile
$timeout
我有一个类似的问题,是的,用解决了$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服务可确保使用指令添加的属性编译元素。
这是使用上面的代码的工作小提琴。希望这就是您要寻找的!