AngularJS：容器宽度随调整改变及$doCheck渲染后更新D3图表问题

问题1：实现容器宽度随窗口调整自动变化 #

要让AngularJS里的容器宽度跟随窗口大小动态调整，最可靠的方式是封装一个自定义指令来监听窗口resize事件，同时处理Angular的 digest 循环同步问题，避免内存泄漏。

具体实现步骤： #

1. 写一个监听resize的指令，把容器宽度绑定到作用域变量：

angular.module('yourApp').directive('autoResize', ['$window', function($window) {
  return {
    scope: {
      containerWidth: '='
    },
    link: function(scope, element) {
      // 更新容器宽度的函数
      function refreshWidth() {
        // 获取当前容器的实际宽度
        scope.containerWidth = element[0].offsetWidth;
        // 手动触发digest，因为resize事件不在Angular上下文内
        scope.$apply();
      }

      // 初始化时先获取一次宽度
      refreshWidth();

      // 绑定窗口resize事件
      const windowEl = angular.element($window);
      windowEl.on('resize', refreshWidth);

      // 组件销毁时移除监听，防止内存泄漏
      scope.$on('$destroy', () => {
        windowEl.off('resize', refreshWidth);
      });
    }
  };
}]);

2. 在模板中使用这个指令：

<div auto-resize container-width="$ctrl.containerWidth" style="width: 100%;">
  <!-- 你的容器内容 -->
</div>

这样一来，窗口大小变化时，containerWidth变量会自动更新，你可以在控制器或组件里直接使用这个值来调整布局或图表。

问题2：AngularJS 1.5组件中D3图表的更新优化 #

你提到用$doCheck时会遇到容器宽度还没更新的问题，这是因为$doCheck在每一次digest循环过程中就触发了，此时父容器的DOM可能还没完成重新渲染，所以拿到的是旧宽度。下面给你几个更靠谱的方案：

方案1：结合$onChanges + $timeout处理数据与宽度变化 #

如果你的数据是单向绑定（<），$onChanges其实是可以触发的，可能之前的用法有疏漏。我们可以把数据变化和容器宽度变化的监听分开，用$timeout确保DOM更新完成后再更新图表：

angular.module('yourApp').component('d3Chart', {
  bindings: {
    chartData: '<', // 单向绑定数据
    containerWidth: '<' // 来自autoResize指令的宽度
  },
  controller: ['$element', '$timeout', function($element, $timeout) {
    const ctrl = this;
    let chartSvg; // 存储D3的SVG实例

    // 初始化图表
    const initChart = () => {
      chartSvg = d3.select($element[0])
        .append('svg')
        .attr('width', ctrl.containerWidth)
        .attr('height', 400);
      // 其他D3初始化逻辑（比如坐标轴、数据绑定）
    };

    // 更新图表的通用方法
    const updateChart = () => {
      if (!chartSvg) return;
      // 更新SVG宽度
      chartSvg.attr('width', ctrl.containerWidth);
      // 根据最新的chartData更新图表内容
      // 这里写你的D3数据更新逻辑
    };

    // 监听数据或宽度变化
    ctrl.$onChanges = (changes) => {
      // 只要数据或宽度有变化，就延迟更新图表
      if (changes.chartData || changes.containerWidth) {
        $timeout(updateChart); // $timeout确保DOM已更新
      }
    };

    // 组件初始化时创建图表
    ctrl.$onInit = initChart;

    // 暴露放大图表的方法给父组件/模板
    ctrl.enlargeChart = () => {
      ctrl.containerWidth *= 1.2; // 放大20%
      updateChart();
    };
  }]
});

然后在模板里使用组件并绑定按钮：

<div auto-resize container-width="$ctrl.containerWidth">
  <d3-chart 
    chart-data="$ctrl.chartData" 
    container-width="$ctrl.containerWidth">
  </d3-chart>
</div>
<button ng-click="$ctrl.enlargeChart()">放大图表</button>

方案2：用$postDigest处理DOM更新后的逻辑 #

如果你需要在当前digest循环完全结束（DOM已更新）后执行图表更新，可以用$postDigest钩子。不过要注意$postDigest只会执行一次，所以如果是持续的resize或数据变化，需要结合监听事件：

// 在组件controller里
ctrl.$doCheck = () => {
  // 标记需要更新图表
  ctrl.needsChartUpdate = true;
};

ctrl.$postDigest = () => {
  if (ctrl.needsChartUpdate) {
    updateChart();
    ctrl.needsChartUpdate = false;
  }
};

这种方式可以确保每次digest循环结束后，DOM已经更新完成，此时获取的容器宽度是最新的。

内容的提问来源于stack exchange，提问作者Leonardo Hernandez