Javascript 如何将angularjs指令绑定到链接函数中定义的d3js节点
我想在AngularJs应用程序中使用d3js图,然后将指令绑定到节点 首先,我将js代码放在指令的link函数中,一切正常Javascript 如何将angularjs指令绑定到链接函数中定义的d3js节点,javascript,angularjs,d3.js,angularjs-directive,Javascript,Angularjs,D3.js,Angularjs Directive,我想在AngularJs应用程序中使用d3js图,然后将指令绑定到节点 首先,我将js代码放在指令的link函数中,一切正常 angular.module('myApp', []). directive('grapheForces', function() { return { restrict: 'A', link: function (scope, element) { var width = 450;
angular.module('myApp', []).
directive('grapheForces', function() {
return {
restrict: 'A',
link: function (scope, element) {
var width = 450;
var height = 400;
var color = d3.scale.category20();
scope.$watch('grapheDatas', function (grapheDatas) {
var force = d3.layout.force()
.charge(-120)
.linkDistance(30)
.size([width, height])
.nodes(grapheDatas.nodes)
.links(grapheDatas.links)
.start();
var svg = d3.select("body").append("svg")
.attr("width", width)
.attr("height", height);
var link = svg.selectAll(".link")
.data(grapheDatas.links)
.enter().append("line")
.attr("class", "link")
.style("stroke-width", function(d) { return Math.sqrt(d.value); });
var node = svg.selectAll(".node")
.data(grapheDatas.nodes)
.enter().append("circle")
.attr("class", "node")
.attr("r", 5)
.style("fill", function(d) { return color(d.group); })
.call(force.drag);
node.append("title")
.text(function(d) { return d.name; });
force.on("tick", function() {
link.attr("x1", function(d) { return d.source.x; })
.attr("y1", function(d) { return d.source.y; })
.attr("x2", function(d) { return d.target.x; })
.attr("y2", function(d) { return d.target.y; });
node.attr("cx", function(d) { return d.x; })
.attr("cy", function(d) { return d.y; });
});
});
}
}
}).
然后我想给节点添加一个工具提示,所以我选择:
var node = svg.selectAll(".node")
.attr("tooltip", function(){
return "tooltipTextHere";
});
当我使用角度引导时,工具提示是一个指令。
html结果中很好地显示了工具提示属性:
<circle tooltip="tooltipTextHere" class="nodeCircle" r="4.5" style="fill: #b0c4de;"></circle>
但是工具提示是无效的,所以我绑定的每个指令都是如此
我猜这是因为在编译阶段没有考虑到指令,但我找不到如何做到这一点,因为我在AngularJs中达到了目前的理解极限
你知道我怎样才能做到吗??
非常感谢您的宝贵回答。我已经回答了一个非常类似的问题。你可以在那里看到完整的答案 基本上,在添加工具提示属性后,需要使用类似于
元素的东西删除自定义指令属性。removeAttr(“graph forces”)
,然后运行$compile(element)(scope)
,以便应用程序找到工具提示指令
这里有一个。太棒了,非常感谢。工具提示仍然没有显示,但是这是一个显示问题,因为我可以看到它出现在html代码中。没有问题!如果您仍然无法显示工具提示,请发布一个提琴或弹弓,我们也可以提供帮助。