AngularJS应用程序中的D3

Question

我正在尝试用AngularJS创建我的第一个应用程序。它看起来很整洁，但有很多抽象，我只是好奇是否有人有关于使用angular方法论来更新用d3js创建的视觉效果的最常用方法的建议。

谢谢，bp

Answer 1

为了让angular和其他框架更好地发挥作用，使用指令包装“其他”框架。

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

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

这里有一个使用SVG的例子，非常棒

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

下面是一个包装TinyMCE的示例

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

Answer 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 circles。在角度控制器中(在触发绘制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 circle元素上的值。对于动画之类的东西，d3现在不再负责，必须手动实现或使用不同的模式。

Answer 3

您也可以按照本教程/截屏视频来了解如何在angular中使用D3。它有一点不同，因为它在d3周围使用了一个名为人力车的包装器库，它提供了一些图形特定的东西，但方法是完全相同的：

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