Angular指令多次嵌入D3.js图表时的响应式显示异常问题

你遇到的问题主要出在指令名称不匹配和Bootstrap响应式类使用冲突这两个地方，我帮你逐一拆解：

核心问题：指令与模板标签不对应 #

你定义的Angular指令是chart：

app.directive('chart', function () { 
 return { 
 restrict: 'E', 
 templateUrl: '/angular/chart', 
 link: function(scope) { 
 var data = scope.data; 
 if (data) { init(); } 
 function init() { ... } 
 // 其余代码
 }
 };
});

但在Jade模板里你用的是account-chart标签。Angular的元素指令命名规则是驼峰式转短横线式：如果指令名是accountChart，模板里才能写account-chart；而你定义的是chart，模板里必须用<chart>标签。这就导致平板及以上屏幕里的account-chart根本没被Angular识别，自然不会渲染出图表。

第二个问题：响应式类冲突导致移动端重复显示 #

你的模板结构里：

• .row.visible-xs：这个容器仅在移动端（xs屏幕）显示
• .row.hidden-lg.hidden-xl：这个容器会在xs、sm、md屏幕显示（只隐藏了lg和xl尺寸）

所以在xs屏幕下，这两个容器都会显示，里面的图表就重复出现了。

修复方案 #

1. 统一指令与模板标签

二选一即可：

• 要么把模板里的account-chart全部改成<chart>；
• 要么修改指令定义为驼峰式，匹配模板里的短横线标签：

app.directive('accountChart', function () { 
 return { 
 restrict: 'E', 
 templateUrl: '/angular/chart', 
 link: function(scope) { 
 var data = scope.data; 
 // 监听data变化，适配异步数据场景
 scope.$watch('data', function(newData) {
  if (newData) {
    init();
  }
 });
 function init() { ... } 
 }
 };
});

2. 调整响应式类，避免重复和隐藏错误

重新梳理不同屏幕的显示逻辑，用更精准的Bootstrap类：

//- 移动端专属图表（仅xs屏幕显示）
.row.visible-xs-block
  .mobile-top
    account-chart // 或者改成chart，根据上面的选择来

//- 平板及以上专属图表（xs屏幕隐藏，其他尺寸都显示）
.row.hidden-xs
  .col-lg-4.col-md-5.col-sm-6.p-xs-reset
    account-chart // 同上

（如果用的是Bootstrap 4，建议替换成d-block d-sm-none和d-none d-sm-block这类更清晰的响应式类）

3. 优化指令初始化逻辑

原来的代码只在link时检查一次scope.data，如果数据是异步加载的，可能会错过初始化时机。改成监听data变化，确保数据就绪后再渲染图表：

link: function(scope, element) { 
  scope.$watch('data', function(newData) {
    if (newData) {
      // 初始化前清空旧图表，避免重复渲染
      d3.select(element[0]).selectAll('*').remove();
      init(newData);
    }
  });

  function init(data) { 
    // 这里用传入的data来初始化D3图表
    // ...你的D3逻辑
  }
}

内容的提问来源于stack exchange，提问作者Ayeye Brazo