如何使用D3.select選擇指令的父項？

Question

我正在嘗試獲取指令父級的高度，其想法是使圖表的大小自動適應其父級html容器。 感覺這個問題已經解決了上百萬次，但是我不知道為什么我的代碼無法正常工作-我認為我的錯誤與Angular.js有關，但與D3無關。

改編了很好的教程， 網址為http://www.ng-newsletter.com/posts/d3-on-angular.html ，這是我的代碼： http : //codepen.io/anon/pen/QjNodL

我觀察窗口大小的變化並執行以下功能：

scope.render = function(data) {
    var svg = parent.append('svg');

    renderTimeout = $timeout(function() {
          var width = d3.select(ele[0])[0][0].offsetWidth - margin,
              height = d3.select(ele[0]).node().getBoundingClientRect().height;
              svg.attr('height', height);

這是HTML：

<div class="col-md-12" style="height: 100px;">
    <d3-bars bar-height="20" bar-padding="5" data="ragChartData" on-click="onClick(item)" style="height: 100px;">
    </d3-bars>
</div>

不幸

d3.select(ele[0])

選擇指令

<d3-bars></d3-bars>

但它不是父母，我不知道如何選擇它。

Answer 1

您可以嘗試使用以下選擇函數： d3.select(ele[0].parentNode)