Javascript 使用引导多次使用Angular指令时正确注入d3.js图形

我创建了一个指令来显示我的d3.js图表，出于设计原因，我需要在同一个布局中使用它两次，因为移动设备的设计看起来应该不同。这是HTML（Jade）：

角度指令：

app.directive('chart', function () {
  return {
    restrict: 'E',
    templateUrl: '/angular/chart',
    link: function(scope) {

      var data = scope.data;

      if (data) {
        init();
      }

      function init() { ... }

结果是，在手机尺寸中，我看到了两张图表，而在“平板电脑及以上”尺寸中，我什么也看不到

我做错了什么

---

这里有一支关于这个问题的钢笔：

这个问题实际上不是AngularJS问题。您必须确保指令的模板/指令的html部分具有响应性

---

如果确保了这一点（指令的响应html部分），则无论您在何处使用指令，它都将适应给定的空间。

问题在于您将ID属性作为元素的目标，该属性对于每个元素都应该是唯一的（这就是为什么两个SVG都附加到第一个图表中的原因）

Angular

为

链接

函数提供另一个参数，该函数为您提供组件DOM元素引用

您需要每个图表组件将其自身作为HTML来注入图形（您还可以提供一个子HTML元素）

我将xs版本的背景改为粉红色，以使其更清晰

主要的变化体现在以下两个方面：

link: function(scope, element) {
  // ...
  //initialize SVG
  svg = d3.select(element[0]).append('svg');
  // ...
}

---

这是您的代码笔修复：

它可以正确调整，如果我不使用指令，只写“Hello Mobile”和“Hello Tablets and up”，我可以在调整窗口大小时看到它正确显示。。。使用指令，返回相同的文本，我只能看到顶部的一个。。。看起来它只加载了第一个问题。我更新了问题，我想现在更清楚了，谢谢。我还添加了一支笔关于这个问题。据我所知，这是在对原始问题进行很多更改之前发布的，但我认为这更像是一个评论，而不是一个回答。很高兴我能提供帮助：-）

link: function(scope, element) {
  // ...
  //initialize SVG
  svg = d3.select(element[0]).append('svg');
  // ...
}