AngularJS 应用程序中的 D3答案

【问题标题】：D3 within an AngularJS appAngularJS 应用程序中的 D3
【发布时间】：2012-06-21 15:26:46
【问题描述】：

我正在尝试使用 AngularJS 创建我的第一个应用程序。它看起来很整洁，但是有很多抽象，我很好奇是否有人对使用 Angular 方法更新使用 d3js 创建的视觉效果最惯用的方式提出建议。

谢谢， bp

【问题讨论】：

标签： d3.js angularjs

【解决方案1】：

为了让 Angular 和其他框架运行良好，就是使用指令来包装“其他”框架。

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

您想要做的事情是在“其他”框架更新数据时告诉 Angular。如果 angular 不需要知道，那么你的任务就更简单了。

这是一个适用于 SVG 的示例，非常棒

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

这是一个包装 TinyMCE 的示例

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

【讨论】：

【解决方案2】：

还可以将 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 调用，它告诉 Angular 消化更改的范围；这将改变 svg 圆形元素的值。对于动画之类的东西，d3 现在不再负责，必须手动实现或使用不同的模式。

【讨论】：

【解决方案3】：

您还可以按照本教程/截屏视频了解如何将 D3 与 angular 一起使用。这有点不同，因为它使用了一个围绕 d3 的包装库，称为 rickshaw，它提供了一些特定于图形的东西，但方法完全相同：

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

【讨论】：

【解决方案4】：

如果我们在指令中使用 d3 来生成具有其他 Angular 指令的元素（我认为您会发现这是一个相当普遍的要求），您可以在渲染过程的更新阶段结束时使用 @ 调用 $compile 987654322@ 方法。像这样（假设我们正在渲染一堆圆圈）：

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

【讨论】：