D3 в приложении AngularJS

Question

Я пытаюсь создать свое первое приложение с помощью AngularJS. Это выглядит аккуратно, но есть много абстракции, и мне просто интересно, есть ли у кого-нибудь совет по самому идиоматическому способу использования угловой методологии для обновления визуальных образов, созданных с помощью d3js.

Спасибо, п.о.

Answer 1

Для того, чтобы сделать угловые и другие структуры играют хорошо, чтобы обернуть «другую» рамку с помощью директив.

http://docs.angularjs.org/guide/directive

Дело в том, что вы хотите сделать, это сказать, угловатый, когда данные были обновлены «других» рамок. Если угловой не нужно знать, тогда ваша задача проще.

Вот пример, который работает с SVG, его удивительной

http://sullerandras.github.com/SVG-Sequence-Diagram/

Вот пример, который оборачивает TinyMCE

http://jsfiddle.net/programmieraffe/kjsEV/

Answer 2

Просьба также проверить статью Брайана Форда (AngularJS intern), где он подробно описывает интеграцию AngluarJS с D3.

http://briantford.com/blog/angular-d3.html

Answer 3

Существует также возможность вставлять в AngularJS обрабатывать синтаксис бар непосредственно в d3 генерироваться элементы:

var containerDiv = d3.select(targetCSSSelectorForADiv); 
var svgG = containerDiv 
           .append("svg") 
           .attr("width", width + margin.left + margin.right) 
           .attr("height", height + margin.top + margin.bottom) 
           .append("g") 
           .attr("transform", "translate(" + margin.left + "," + margin.top + ")") 

svgG.selectAll(".tempclass").data(scope.circles).enter() 
           .append("circle") 
           .attr("class", "tempclass") 
           .attr("cx", function (d, i) { return "{{circles[" + i + "].cx}}" }) 
           .attr("cy", function (d, i) { return "{{circles[" + i + "].cy}}" }) 
           .attr("r", function (d, i) { return "{{circles[" + i + "].radius}}" }) 
           .attr("ng-style", function (d, i) 
           { 
            return "{fill: circles[" + i + "].circolor" 
             + ", opacity: circles[" + i + "].opa" 
             + ", 'stroke-width': 4*circles[" + i + "].opa" 
             + ", stroke: 'red' }"; 
           }); 

Пожалуйста, обратите внимание на следующие вещи: сфера в-самом деле угловая сфера объект передается из директивы в функцию рендеринга. Установка стиля элемента в выражение «{...}} не будет работать, поэтому я использую здесь атрибут« ng-style ».

Однако есть еще один трюк: Вы должны сказать Угловая смотреть на динамически создаваемых элементов DOM и вязальной проволоки до данных, теперь я знаю два способа сделать это:

//the target div is the one with the angular ng-controller attribute 
//this you can call at the end of the d3 rendering call from within the render function 
angular.bootstrap(document.getElementById("d3ContainerDivID"), ['d3App']); 

другой способ заключается в следующем:

//and this could be called from the directive that triggered the rendering or 
//some other place that could have the angular $compile service injected 
$compile(document.getElementById("d3ContainerDivID"))(scope); 

Теперь вы можете изменить элементы области видимости, и они будут напрямую обновлены до ваших d3 элементов, в данном случае в кругах SVG. В угловом контроллере (который получает экземпляр перед директивными огнями, которые рисуют объекты d3).

$scope.circles = []; 
    for (var i = 0; i < 50; i++) 
    { 
     $scope.circles.push(new Circle()); 
    } 
    setInterval(function() 
    { 
     $scope.circles.forEach(function (d, i) { $scope.circles[i] = new Circle(); }); 
     $scope.$digest(); 
    }, 2000); 

Обратите внимание на вызов $ digest, который говорит угловым, чтобы переварить измененную область; это изменит значения для элементов круга SVG. Для чего-то вроде анимации и т. Д. Теперь d3 теперь не отвечает, и нужно будет вручную или использовать другой шаблон.

Answer 4

Вы также можете ознакомиться с этим учебником/screencast, чтобы узнать, как использовать D3 с угловым. Это немного отличается, потому что он использует оболочку библиотеки вокруг d3 под названием рикша, который обеспечивает некоторые Graphing конкретные вещи, но подход точно такой же:

http://tagtree.tv/d3-with-rickshaw-and-angular

Answer 5

Если мы используем d3 внутри директивы для создания элементы с другими угловыми директивами (как я думаю, вы найдете довольно обычное требование), вы можете позвонить $compile в конце фазы UPDATE процесса рендеринга с помощью метода call(). Как это (при условии, что мы рендеринг кучи кругов):

mySvg.selectAll("circle") 
       .data(scope.nodes) 
       .enter() 
       .append("circle") 
       .attr("someDirective") 
       .call(function(){ 
        $compile(this[0].parentNode)(scope); 
       });