How to bind an angularjs directive to a d3js node defined in a link function
angularjs, angularjs-directive, d3.js, javascript
Solution
I have answered a very similar question here. You can see the full answer there.
Basically, after you add the tooltip attributes, you need to remove your custom directive attribute with something like `element.removeAttr("graphe-forces")` and then run `$compile(element)(scope)` so the app will find the tooltip directive.
Here's a fiddle of a working example.
Problem
I would like to use a d3js graph in an AngularJs app, and then bind directives to the nodes. First I put the js code in the link function of a directive and everything works well. ``` 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; }); }); }); } } }). ``` And then I would like to add a tooltip to the nodes, so I go : ``` var node = svg.selectAll(".node") .attr("tooltip", function(){ return "tooltipTextHere"; }); ``` As I use angular-bootstrap, tooltip is a directive. The tooltip attribute is well present in the html result : ``` <circle tooltip="tooltipTextHere" class="nodeCircle" r="4.5" style="fill: #b0c4de;"></circle> ``` But the tooltip is ineffective, and so it goes for every directive I bind like that. I guess it is because the directive has not been taken in account during the compile phase, but I can't find how to do that as I reach my current comprehension limits in AngularJs. Do you have an idea of how i could make it happen ?? Thank you very much for your very valuable answers.