在Angular中构建可重复使用的D3.js图表​​，宽度为100％？

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()));      
};

在调整大小时：获取宽度，更新图表的宽度，然后重绘图表。除非您需要显示图表的当前宽度或在图表外使用它，否则没有任何理由将宽度存储在示波器中或使用手表。

Answer 2

我使用this.offsetWidth，其中“this”是div元素。经过几次迭代，这就是我最终的结果。即使使用exports.width（）更新宽度，这仍然有效。

d3.custom.barChart = function module() {

  var width = 1000, // Update width in selection.each
      height = 500,
      widthFromElement = true,
      heightFromElement = true
  ...

  function exports(_selection) {
    _selection.each(function(_data) {

      width = widthFromElement ? this.offsetWidth || width : width
      height = heightFromElement ? this.offsetHeight || height : height
      ...
    })
  }

  ...

  exports.width = function(_x) {
    if (!arguments.length) return width;
    widthFromElement = false
    width = parseInt(_x);
    return this;
  };