Как использовать директивы angularjs в сгенерированном d3 html?

У меня была похожая проблема, и да, я решил ее с помощью $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 гарантирует, что ваш элемент скомпилирован с атрибутами, добавленными вашей директивой.

Вот рабочая скрипта, использующая приведенный выше код. Надеюсь, это то, что вы ищете!

Довольно хороший ответ от @jbll. Но, вероятно, будет лучше связать компиляцию директивы с концом этапа ввода. Важно иметь фазы ввода и фазы обновления, чтобы графика могла реагировать на обновления данных без повторного создания каждого элемента. В предыдущем ответе каждая директива на каждом узле компилировалась бы всякий раз, когда модель изменялась. Это может быть то, что нужно, но, вероятно, нет.

Следующий код показывает обновление графики d3 при каждом изменении переменной $scope.nodes.

Это также немного аккуратнее, потому что не требует удаления и воссоздания исходной директивы, что выглядит как хак.

Вот скрипка

Добавьте кнопку в html:

<button ng-click="moveDots()">Move the dots</button>

А затем измените файл JavaScript на:

var myApp = angular.module('myApp', ['ui.bootstrap']);

myApp.controller('myCtrl', ['$scope', function($scope){
    $scope.nodes = [
        {"name": "foo", x: 50, y: 50},
        {"name": "bar", x: 100, y: 100}
    ];
    $scope.moveDots = function(){
        for(var n = 0; n < $scope.nodes.length; n++){
            var node = $scope.nodes[n];
            node.x = Math.random() * 200 + 20;
            node.y = Math.random() * 200 + 20;
        }
    }
}]);

myApp.directive('myNodes', ['$compile', function ($compile) {
    return {
        restrict: 'A',
        link: function(scope, element, attrs) {

            var mySvg = d3.select(element[0])
                .append("svg")
                .attr("width", 250)
                .attr("height", 250);

            renderDots();

            scope.$watch("nodes", renderDots, true);

            function renderDots(){

                // ENTER PHASE

                mySvg.selectAll("circle")
                    .data(scope.nodes)
                    .enter()
                    .append("circle")
                    .attr("tooltip-append-to-body", true)
                    .attr("tooltip", function(d){
                        return d.name;
                    })
                    .call(function(){
                        $compile(this[0].parentNode)(scope);
                    });

                // UPDATE PHASE - no call to enter(nodes) so all circles are selected

                mySvg.selectAll("circle")
                    .attr("cx", function(d,i){
                        return d.x;
                    })
                    .attr("cy", function(d,i){
                        return d.y;
                    })
                    .attr("r", 10);

                // todo: EXIT PHASE (remove any elements with deleted data)
            }
        }
    };
}]);

если html генерируется чем-то другим, кроме angularjs, и вставляется в DOM, вам нужно будет скомпилировать html, который включает ваши атрибуты директивы, прежде чем вставлять его в DOM, чтобы angular знал об этом.

Мне этот метод нравится намного больше, так как вам не нужно вызывать removeAttr (похоже на хак)

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;
         });

        $compile(svg[0])(scope);
        }
    };
}]);

@david004 хорошо замечает, что нужно использовать цепочку с enter(), поэтому $compile вызывается только один раз для каждого входящего элемента. Но вместо вызова $compile на parentNode я использую вызов для $compile каждый отдельный входящий элемент:

// Entering
myD3Selection.enter()
  .append( 'rect' )
  .attr( {foo: 'bar'} )
  .call( compile );

// Compile encapsulated in reusable function, so can be used on multiple enter() chains
function compile( d3Selection )
{
  d3Selection.each( function( d, i )
  {
    // this is the actual DOM element
    $compile( this )( scope );
  } );
}