d3节点内的角度指令

Question

I've got a simple version of the tree layout ( https://bl.ocks.org/mbostock/4339083 ) on my Angular app. However, I'm trying to replace the "text" node with an Angular Directive. How can I achieve this?

Instead of .text(function(d) { return d.name; }) , I'm trying to compile a directive which takes in d.name as a parameter.

VERSIONS :

• Angular : 1.5.3
• d3 : 3.5.17

Update: The compile works great, it injects the HTML into it, however it doesn't show up in the SVG. When you hover over the user-node node in the DOM, it doesn't highlight anything on the page...

Answer 1

Your questions a little vague but perhaps use a $compile ?

var nodeEnter = node.enter().append("g")
  .attr("class", "node")
  .attr("transform", function(d) {
    return "translate(" + d.y + "," + d.x + ")";
  });

nodeEnter.each(function(d){
  var el = $compile( '<node-directive></node-directive>' )( scope );
  angular.element(this).append(el);
});

---

EDITS

I worked up an example. It seems that SVG doesn't like the nesting of custom elements (your directives inside of it). So, here's an approach:

nodeEnter.append("node-directive")
  .attr("data-name", function(d){
    return d.name;
  })
  .each(function(){
    $compile(this)(scope);
  });

Where node-directive is:

angular.module('d3Chart').directive('nodeDirective', [
  function() {
    return {
      link: function(scope, element, attr) {
        var p = d3.select(element[0].parentNode);
        p.append("text")
          .text(attr.name);
        element.remove();
      }
    };
  }
]);

Complete code:

 var myAppModule = angular.module('d3Chart', []); angular.module('d3Chart').controller('chartCtrl', function($scope) { $scope.treeData = [{ "name": "TopLevel", "parent": "null", "value": 10, "type": "black", "level": "red", "children": [{ "name": "Level 2A", "parent": "Top Level", "value": 15, "type": "grey", "level": "red", "children": [{ "name": "Son of A", "parent": "Level 2 A", "value": 5, "type": "steelblue", "level": "orange" }, { "name": "Daughter of A", "parent": "Level 2 A", "value": 8, "type": "steelblue", "level": "red" }] }, { "name": "Level 2B", "parent": "Top Level", "value": 10, "type": "grey", "level": "green" }] }]; }); angular.module('d3Chart').directive('nodeDirective', [ function() { return { link: function(scope, element, attr) { var p = d3.select(element[0].parentNode); p.append("text") .text(attr.name); element.remove(); } }; } ]); angular.module('d3Chart').directive('treeLayout', ['$compile', function($compile) { return { restrict: 'E', scope: { data: '=' }, link: function(scope, element) { var margin = { top: 20, right: 120, bottom: 20, left: 120 }, width = 960 - margin.right - margin.left, height = 500 - margin.top - margin.bottom; var i = 0; var tree = d3.layout.tree() .size([height, width]); var diagonal = d3.svg.diagonal() .projection(function(d) { return [dy, dx]; }); var svg = d3.select(element[0]).append("svg") .attr("width", width + margin.right + margin.left) .attr("height", height + margin.top + margin.bottom) .append("g") .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); root = scope.data[0]; update(root); function update(source) { // Compute the new tree layout. var nodes = tree.nodes(root).reverse(), links = tree.links(nodes); // Normalize for fixed-depth. nodes.forEach(function(d) { dy = d.depth * 180; }); // Declare the nodes… var node = svg.selectAll("g.node") .data(nodes, function(d) { return d.id || (d.id = ++i); }); // Enter the nodes. var nodeEnter = node.enter().append("g") .attr("class", "node") .attr("transform", function(d) { return "translate(" + dy + "," + dx + ")"; }); nodeEnter.append("circle") .attr("r", function(d) { return d.value; }) .style("stroke", function(d) { return d.type; }) .style("fill", function(d) { return d.level; }); nodeEnter.append("node-directive") .attr("data-name", function(d){ return d.name; }) .each(function(){ $compile(this)(scope); }); // Declare the links… var link = svg.selectAll("path.link") .data(links, function(d) { return d.target.id; }); // Enter the links. link.enter().insert("path", "g") .attr("class", "link") .style("stroke", function(d) { return d.target.level; }) .attr("d", diagonal); } } } } ]) 

 <!DOCTYPE html> <html ng-app="d3Chart"> <head> <script data-require="angular.js@1.4.8" data-semver="1.4.8" src="https://code.angularjs.org/1.4.8/angular.js"></script> <script data-require="d3@3.5.3" data-semver="3.5.3" src="//cdnjs.cloudflare.com/ajax/libs/d3/3.5.3/d3.js"></script> <script data-require="jquery@2.1.4" data-semver="2.1.4" src="https://code.jquery.com/jquery-2.1.4.js"></script> <script src="script.js"></script> </head> <body> <div ng-controller="chartCtrl"> <tree-layout data="treeData"></tree-layout> </div> </body> </html>