javascript - 使用 Bootstrap 多次使用 Angular 指令时正确注入(inject) d3.js 图形

Question

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

// Jade / Pug template:
[...]
.row.visible-xs
  .mobile-top
    //- Chart for mobile
    account-chart
.row.hidden-lg.hidden-xl
  .col-sm-12
    [...]

.row
  .col-lg-4.col-md-5.col-sm-6.p-xs-reset
    //- Chart for tablets and up
    .hidden-xs
      account-chart
[...]

Angular Directive(指令):

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

      var data = scope.data;

      if (data) {
        init();
      }

      function init() { ... }

结果是，在移动尺寸中我看到 2 个图表，在“平板电脑及以上”尺寸中我什么也看不到...

我做错了什么？

这里有一篇关于这个问题的文章:https://codepen.io/anon/pen/RQwppE

Answer 1

问题是您使用 ID 属性定位了元素，每个元素都应该是唯一的(这就是为什么两个 SVG 都附加到第一个图表的原因)

Angular 为 link 函数提供另一个参数，它为您提供组件 DOM 元素引用。

您需要每个图表组件将自身作为 HTML 来注入(inject)图形(您也可以提供一个子 HTML 元素)

我在xs版本上把背景改成了粉红色，这样更清晰

主要变化在这两行:

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

这是你的 codepen 修复:https://codepen.io/neilkalman/pen/YezVOq?editors=0010