Используя lambdaj , вы можете сортировать коллекцию своих контактов (например, по их имени), как следует
sort(contacts, on(Contact.class).getName());
или по их адресу:
sort(contacts, on(Contacts.class).getAddress());
и т. д. Более того, он предлагает DSL для доступа и управления вашими коллекциями различными способами, такими как фильтрация или группировка ваших контактов на основе некоторых условий, объединение некоторых из их значений свойств и т. Д.
Чтобы заставить угловые и другие фреймворки играть хорошо, нужно обернуть «другие» фреймворки с помощью директив.
http://docs.angularjs.org/guide/directive
То, что вы хотите сделать, это указать углы, когда данные были обновлены «другими» структурами. Если угловой не нужно знать, тогда ваша задача проще.
Вот пример, который работает с SVG, его удивительным
http://sullerandras.github.com/SVG-Sequence-Diagram/
Вот пример, который обертывает TinyMCE
Также ознакомьтесь со статьей Брайана Форда (интернационал AngularJS), где он подробно описывает интеграцию AngluarJS с D3.
Если мы используем d3 внутри директивы для генерации элементов с другими угловыми директивами (как я думаю, вы найдете это довольно общее требование), вы можете вызвать $compile
в конце фазы UPDATE процесса рендеринга с помощью call()
. Подобно этому (если мы создаем кучу кругов):
mySvg.selectAll("circle")
.data(scope.nodes)
.enter()
.append("circle")
.attr("someDirective")
.call(function(){
$compile(this[0].parentNode)(scope);
});
Существует также возможность вставить синтаксис дескриптора 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 ».
Однако есть еще один трюк: вам нужно сказать Angular, чтобы посмотреть на динамически сгенерированные элементы 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 теперь не отвечает, и нужно будет вручную или использовать другой шаблон.
Вы также можете следовать этому руководству / screencast, чтобы узнать, как использовать D3 с угловым. Это немного отличается, потому что в нем используется библиотека обертки вокруг d3, называемая rickshaw, которая предоставляет некоторые графические данные, но подход точно такой же: