42

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

谢谢，bp

4

4 回答 4

34

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

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

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

这是一个适用于 SVG 的示例，它很棒

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

这是一个包装 TinyMCE 的示例

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

于 2012-06-21T18:26:44.057 回答
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”属性。

但是还有一个技巧：您需要告诉 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 现在不再负责，必须手动实现或使用不同的模式。

于 2013-05-30T21:51:45.057 回答
0

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

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

于 2014-01-07T14:41:25.423 回答
0

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

mySvg.selectAll("circle")
                .data(scope.nodes)
                .enter()
                .append("circle")
                .attr("someDirective")
                .call(function(){
                    $compile(this[0].parentNode)(scope);
                });
于 2014-07-16T06:44:32.523 回答