javascript - ngDialogを使用してd3.js折れ線グラフを表示する方法

Question

ngDialog を使用して d3.js グラフを追加しようとしていますが、ビューにグラフが表示されません。表示するテキスト値を取得すると、グラフではなく表示されます。

インデックス.cshtml

<a id="via-service" href="" ng-click="openTemplate()">Open Graph</a>

AngularJS コード

   var app = angular.module('graphDialog', ['ngDialog']);
    app.config(['ngDialogProvider', function (ngDialogProvider) {
        ngDialogProvider.setDefaults({
            className: 'ngdialog-theme-default',
            plain: false,
            showClose: true,
            closeByDocument: true,
            closeByEscape: true,
            appendTo: false,
            preCloseCallback: function () {
                console.log('default pre-close callback');
            }
        });
    }]);

    app.controller('MainCtrl', function ($scope, $rootScope, ngDialog, $timeout) {       
        $scope.openTemplate = function () {
            ngDialog.open({
                template: 'RankGraph',
                className: 'ngdialog-theme-plain',
                scope: $scope
            });            
        };
    });

RankGraph.cshtml

<script src="~/js/LineGraph.js"></script>
<div class="modal-header">
    <h3>Rank Vs Date Graph</h3>
</div>
<div class="modal-body">
    <div id="visualisation"></div>

</div>

<div class="modal-footer">
    <h4>Date</h4>
</div>

LineGraph.js

var data = [{
      "Date": "2016-03-03",
      "Rank": 1,
      "Accession": "00005768-201305001-00045"
    }, {
      "Date": "2016-03-05",
      "Rank": 5,
      "Accession": "00005768-201305001-00045"
    }, {
       "Date": "2016-03-09",
       "Rank": 7,
       "Accession": "00005768-201305001-00045"
   }, {
       "Date": "2016-03-11",
       "Rank": 2,
       "Accession": "00005768-201305001-00045"
   }];
plotChart(data);
function plotChart(data) {
var accession = data[0].Accession;   
//Defining time format
var dateFormat = d3.time.format('%Y-%m-%d');

//initializing dimensions of the visulisation
var vis = d3.select("#visualisation").append('svg'),
  WIDTH = 800,
  HEIGHT = 600,
  MARGINS = {
      top: 20,
      right: 50,
      bottom: 20,
      left: 50
  }

vis.attr('height', HEIGHT)
  .attr('width', WIDTH);

//Defining range for x. Defining range and domain for y
var x = d3.time.scale().range([MARGINS.left, WIDTH - MARGINS.right])
var y = d3.scale.linear().range([HEIGHT - MARGINS.top, MARGINS.bottom]) 
console.log("data length:" + data.length);

//Defining domain for x
x.domain(d3.extent(data, function (d) {
    return dateFormat.parse(d.Date);
}));
y.domain([0, 12]);

//Define x axis
var xAxis = d3.svg.axis()
  .scale(x)
  .orient("bottom")
  .ticks(5)
  .tickFormat(dateFormat);

//Define y axis
var yAxis = d3.svg.axis()
  .scale(y)
  .orient("left");

//Appending the axes to the svg
vis.append("svg:g")
  .attr("class", "axis")
  .attr("transform", "translate(0," + (HEIGHT - MARGINS.bottom) + ")")
  .call(xAxis);

vis.append("svg:g")
  .attr("class", "axis")
  .attr("transform", "translate(" + (MARGINS.left) + ",0)")
  .call(yAxis)
  .append("text")
  .attr("transform", "rotate(-90)")
  .attr("y", 6)
  .attr("dy", ".71em")
  .style("text-anchor", "end")
  .text("Rank");

//Define line
var lineGen = d3.svg.line()
  //.interpolate("monotone")
  .x(function (d) {
      return x(dateFormat.parse(d.Date));
  })
  .y(function (d) {
      return y(d.Rank);
  });

//Appending the line to the svg
vis.append('svg:path')
  .attr('d', lineGen(data))
  .attr('stroke', 'steelblue')
  .attr('stroke-width', 2)
  .attr('fill', 'none');

vis.append("svg:text")
  .attr("x", (WIDTH / 2))
  .attr("y", 25)
  .attr("text-anchor", "middle")
  .style("font-size", "16px")
  .style("text-decoration", "underline")
  .text("Rank vs Date Graph of " + accession);}

なぜこの問題があるのか​​ 理解できません。私を助けてください。ありがとうございました..