Как интегрировать оба AngularJS & d3.js

Question

Я очень плохо знаком с D3.js и создал диаграмму и привязал к ней данные с помощью вызова API. Проблема в том, что когда я пытаюсь интегрировать эту страницу с остальной частью моего углового приложения, оно делаетнеопределенные вызовы API для извлечения данных.Я включил всю ссылку D3 на страницу Index.html.Я также прикрепил изображение того, как он делает так много вызовов API.Пожалуйста, предложите решение и извинения, если я делаю какую-то глупую ошибку.

Это код для вызова страницы D3.js после нажатия кнопки.

$scope.resourceAnalytics = function (event) {
        $window.open('/ResourceDetails', '_blank');
    }

Маршрутизация на эту страницув app.js

$routeProvider.when("/ResourceDetails", {
        templateUrl: '/Views/ResourceDetails.html',
    });

и, пожалуйста, найдите ниже пример того, как я делаю вызов API с графика

<script>

                    // set the dimensions and margins of the graph
                    var margin = { top: 20, right: 20, bottom: 30, left: 50 },
                        width = 560 - margin.left - margin.right,
                        height = 260 - margin.top - margin.bottom;

                    // parse the date / time
                    var formatTime = d3.timeFormat("%d-%b");
                    var parseTime = d3.timeParse("%d-%b");

                    // set the ranges
                    var x = d3.scaleTime().range([0, width]);
                    var y = d3.scaleLinear().range([height, 0]);


                    // append the svg obgect to the body of the page
                    // appends a 'group' element to 'svg'
                    // moves the 'group' element to the top left margin
                    var svg = d3.select("#linechart").append("svg")
                        .attr("width", width + margin.left + margin.right)
                        .attr("height", height + margin.top + margin.bottom)
                        .append("g")
                        .attr("transform",
                        "translate(" + margin.left + "," + margin.top + ")");
                    d3.json('http://localhost:51719/api/Admin/GetGenderDetails/', function (Jsondata) {
                        var data = Jsondata;

                        // format the data
                        data.forEach(function (d) {
                            d.GenderDate = formatTime(new Date(d.GenderDate));
                            //d.GenderDate = parseTime(d.GenderDate);
                            //d.Male = +d.Male;
                            //d.Female = +d.Female; // ConvertPercent
                        });
                        console.log(data)

                        // define the area
                        var area = d3.area()
                            .x(function (d) { return x(d.GenderDate); })
                            .y0(height)
                            .y1(function (d) { return y(d.Male); });


                        // define the area
                        var area2 = d3.area()
                            .x(function (d) { return x(d.GenderDate); })
                            .y0(height)
                            .y1(function (d) { return y(d.Female); });

                        // define the line
                        var valueline = d3.line()
                            .x(function (d) { return x(d.GenderDate); })
                            .y(function (d) { return y(d.Male); });

                        var valueline2 = d3.line()
                            .x(function (d) { return x(d.GenderDate); })
                            .y(function (d) { return y(d.Female); });


                        // scale the range of the data
                        x.domain(d3.extent(data, function (d) { return d.GenderDate; }));
                        //y.domain([0, d3.max(data, function(d) { return d.close; })]);
                        y.domain([0, d3.max(data, function (d) { return Math.max(d.Male, d.Female); })]);

                        // add the area
                        svg.append("path")
                            .data([data])
                            .attr("class", "area")
                            .attr("d", area);

                        // add the valueline path.
                        svg.append("path")
                            .data([data])
                            .attr("class", "line")
                            .attr("d", valueline);

                        svg.append("path")
                            .data([data])
                            .attr("class", "area2")
                            .attr("d", area2);

                        // Add the valueline2 path.
                        svg.append("path")
                            .data([data])
                            .attr("class", "line")
                            .style("stroke", "#4DADDA")
                            .attr("d", valueline2);

                        // add the X Axis
                        svg.append("g")
                            .attr("transform", "translate(0," + height + ")")
                            .call(d3.axisBottom(x));

                        // add the Y Axis
                        svg.append("g")
                            .call(d3.axisLeft(y));
                    });
                </script>

Несколько вызовов API, выполненных D3