在AngularJS应用程序中的D3
我正在尝试使用AngularJS创build我的第一个应用程序。 它看起来整洁，但是有很多抽象，我只是好奇，如果任何人有最常用的方法来使用angular度方法来更新用d3js创build的视觉效果的build议。
谢谢，bp
为了使angular度和其他框架发挥作用，使用指令来包装“其他”框架。
http://docs.angularjs.org/guide/directive
你想要做的事情是在“其他”框架更新数据时告诉angular度。 如果angular度不需要知道，那么你的任务更简单。
这是一个与SVG一起工作的例子，它很棒
http://sullerandras.github.com/SVG-Sequence-Diagram/
这里是一个包装TinyMCE的例子
请查看Brian Ford（AngularJS实习生）的文章，他在那里描述了AngluarJS与D3的整合。
也可以直接在d3生成的元素中插入AngularJS句柄语法：
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' }"; }); 请注意以下几点：范围实际上是从指令传递到渲染函数的angular度范围对象。 将元素的样式设置为“{{…}}”expression式将不起作用，所以我在这里使用“ng样式”属性。
然而还有一个诀窍：您需要告诉Angular查看dynamic生成的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圈子。 在angular度控制器（它在获取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调用，它告诉angular度消化更改的范围; 这将改变svg圈元素的值。 对于animation等任何东西，d3现在不再负责任，而且必须手动实现或使用不同的模式。
你也可以跟着这个教程/截屏一起看看如何使用D3angular度。 这有点不同，因为它使用了一个名为人力车的包装库，它提供了一些特定的graphics，但是方法完全一样：
如果我们在一个指令中使用d3来生成具有其他Angular指令的元素（我想你会发现这是一个普遍的要求），你可以在call()方法的渲染过程的UPDATE阶段的末尾调用$compile 。 像这样（假设我们正在渲染一堆圈子）：
mySvg.selectAll("circle") .data(scope.nodes) .enter() .append("circle") .attr("someDirective") .call(function(){ $compile(this[0].parentNode)(scope); });
