如何使用D3.select选择指令的父项？

Question

I'm trying to get the height of the parent of a directive, the idea is to automatically adapt the size of the chart to it's parent html container. Feels like this problem has been solved a million times and yet I have no clue why my code doesn't work - I assume my mistake is related to Angular.js though, not D3.

Adapted the very good tutorial at http://www.ng-newsletter.com/posts/d3-on-angular.html , here is my code: http://codepen.io/anon/pen/QjNodL

I watch for changes of the window-size and execute this function:

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

This is the 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>

Unfortunately

d3.select(ele[0])

selects the directive

<d3-bars></d3-bars>

but not it's parent, and I have no clue how to select that.

Answer 1

您可以尝试使用以下选择函数： d3.select(ele[0].parentNode)