d3 resize issue browsers

Question

I have a D3 chart implemented with angular.

I am not able to make it responsive and arrows are not placed properly, I guess I am missing something.

var chart = angular.element("#chart"),
        aspect = chart.width() / chart.height(),
        container = chart.parent();

      angular.element(window).on("resize", function() {
        var targetWidth = container.width();
        chart.attr("width", targetWidth);
        chart.attr("height", Math.round(targetWidth / aspect));
      }).trigger("resize");

Here is my demo Link ..

Please help.

Answer 1

I get an error trying to use your statement

angular.element('#chart')

meaning you're never selecting the chart element

try using the following to select your chart element.

angular.element( document.querySelector( '#chart' ) );

Hope this helps!