D3.js 4 与 AngularJS 1.5（组件或指令？）

Posted 2023-02-22

【中文标题】D3.js 4 与 AngularJS 1.5（组件或指令？）

【英文标题】：D3.js 4 with AngularJS 1.5 ( Components or Directives ? )

【发布时间】：2016-12-25 01:56:23

【问题描述】：

我想将 D3.js v4 与 AngularJS 1.5x 一起使用

过去我使用 .directives 来制作图表，但现在我想知道是否可以使用 .components 代替指令，以及这是否是一个好习惯。

Check the sample case on Plunkr

问题出现在组件中的d3.select(element[0]).append('svg')。 控制台报错：element is not defined.

所以我尝试了类似d3.select('chart-container').append('svg') 但随后 d3 在拥有该类的第一个元素中注入所有图表（在所有文档中查找该类，而不仅仅是组件）。

---

那么...有人可以帮我为可重用组件做一个正确的 d3.select() 吗？

无需为每个 ID 添加不同的 ID（工作量太大，维护起来也太辛苦）

【问题讨论】：

嘿，使用指令有什么问题？您可以拥有指令控制器。

只是想用Angular 2的方式来做，为了以后更容易过渡，反正应该有办法告诉d3-“只在组件中选择这个div，不要看外面！”

【参考方案1】：

您可以将 $element 传递给组件控制器

svg     = d3.select($element[0]).append('svg'),

http://plnkr.co/edit/SMoYLtx4I8RuLf285R6J?p=preview

【讨论】：

您好，感谢您的回复。有趣的是，这会选择组件本身并附加它，但是我可以指向组件模板内的 div 吗？你知道，对于一个特定的位置添加它

当然 - 只是始终相对于 $element 查找它，就像在指令中一样。