javascript - 在 Angular 中构建一个宽度为 100% 的可重用 D3.js 图表？

Question

我正在 Angular 中构建一个 D3.js 条形图指令，based on this example .

到目前为止它工作得很好，但现在我遇到了障碍。我希望我的图表是可变宽度的，而不是固定的，并设置为包含元素宽度的 100%。

我知道如何在指令中调整大小时重绘图形:

    link: function(scope, iElement, iAttrs) { 
      var chartEl = d3.select(iElement[0]);
      window.onresize = function() {
          return scope.$apply();
      };
      scope.$watch(function(){
            return angular.element(window)[0].innerWidth;
        }, function(){
            chartEl.datum(scope.data).call(chart);
        }
      );
    }

这会重绘图形，但如何将指令中的窗口宽度传递给条形图模块，而不是使用目前固定的 500 像素宽度？我需要将宽度附加到 data 还是有其他方法？

更新:JSFiddle 在这里:http://jsfiddle.net/XCLR7/

Answer 1

尚未测试，但这应该有效:

window.onresize = function() {
    chartEl.call(chart.width($(iElement[0]).width()));      
};

调整大小时:获取宽度、更新图表的宽度并重新绘制图表。除非您需要显示图表的当前宽度或在图表外使用它，否则没有任何理由将宽度存储在范围内或使用 watch 。