javascript - 将 Angular 创建的元素与 D3 集成的最简单方法

Question

在学习这两种框架的背景下，我正在尝试不同的方式来集成 D3 和 Angular，并希望得到一些意见:

我的客户端应用程序从我的服务器接收一个 JSON 节点数组和一个边数组。 客户端的核心组件是作为 D3 力导向布局实现的图形可视化:对于节点数组中的每个节点，将一个 (SVG) 圆元素添加到此可视化中，并为这些圆之间的每条边添加线边缘数组。

当然，D3 的 selection.data( ) 使得添加这些元素并将每个元素绑定(bind)到它所代表的数据变得微不足道，但是图形可视化只是更大应用程序的一部分:我需要在应用程序的不同部分(与 D3 无关)创建代表这些相同节点和边缘的不同类型的元素，我希望将所有这些元素绑定(bind)到单个数据集。

我的主要目标是最大限度地降低代码复杂性，并且 - 尽管我已经爱上了 D3 数据绑定(bind)功能的简单和优雅 - 我得出了一个初步的结论，即在应用程序的一部分中同时使用它使用 Angular 在其他部分做同样的事情会产生不必要的复杂性，最简单的方法是使用 Angular 来处理数据绑定(bind)/元素创建

换句话说，我认为我应该使用 ng- 而不是使用 selection.data( ).enter( ).append( ) 来创建 SVG 元素repeat="node in nodes"，也许将每个创建为自定义指令以允许自定义功能。这样做之后，我需要将这些元素“放入”D3，即由其力导向布局进行管理。

我的推理合理吗？特别是，我担心我忽略了这将在对象恒常性方面产生的复杂性，这是节点进入、退出时的重要要求不断地在屏幕上移动，我需要这些过渡是平滑的。你会如何建议我将我的 Angular 创建的元素集成到 D3 中(更准确地说，将它们放入我的 force.nodes{ } 和 force.links( ) 数组中)避免任何此类并发症？

最后，我也在考虑一个策略，我希望它可以让我两全其美:我可以使用 D3 来创建我的 SVG 元素并将它们绑定(bind)到它们各自的数据，而不是在可视化指令的 link 函数(正如我一直在做的，以及我发现的所有 Angular/D3 教程)，我可以在 compile 中运行它功能，并做这样的事情:

d3.select('SVG')
  .selectAll('.node')
  .data('nodeDataArray')
  .enter( )
  .append('circle')
  .attr("class", "node-icon"); //...other attributes/styles etc  

其中，node-icon 是具有包含 C 的 restrict 属性的指令的规范化名称。如果它在编译方法中运行，那么 Angular 应该正常编译所有这些指令，添加任何额外的功能/与其他指令(等)的接口(interface)，就像它对任何其他类型的元素所做的一样。 对吧？

这是直觉上最吸引我的选项 - 是否有任何我可能忽略的陷阱，这可能使前一种策略更可取？

Answer 1

一段时间以来，我一直在思考几乎相同的问题，并得出以下结论。

将 Angular 创建的元素与 d3 集成的最简单方法是使用 .attr 添加指令，然后在 d3 生成的元素上 .call 编译服务。像这样:

mySvg.selectAll("circle")
                .data(scope.nodes)
                .enter()
                .append("circle")
                .attr("tooltip-append-to-body", true)
                .attr("tooltip", function(d){
                    return d.name;
                })
                .call(function(){
                    $compile(this[0].parentNode)(scope);
                });

Here is a Plunker .

我认为使用 Angular ngRepeat 而不是 d3 生成元素的想法不利于框架。 D3 不希望收到一堆元素。它想要传递数据——几乎总是一个数组。然后它有一堆优秀的函数来将数据转换成各种 SVG 或 HTML 元素。让它那样做。

从这句话看来……

D3 makes it trivial to add elements and bind each to the data it represents, but the graph visualization is only part of a much larger application: I need to create different types of elements representing these same nodes and edges in different parts of the application (which D3 has nothing to do with), and I'd like to keep all of these elements bound to a single dataset.

...您暗示使用 d3 生成元素会以某种方式阻止您将相同的数据绑定(bind)到应用程序的不同部分。我不明白为什么。只需让 d3 从范围数组生成元素(就像在链接的 Plunker 中所做的那样)。然后以通常的 Angular 方式在任何地方使用相同的数据集。应用程序的其他部分可以更新数据集，并且 $watch 回调可以重新呈现 d3 图形。