Javascript 如何使用ngDialog显示d3.js折线图

我试图使用ngDialog添加d3.js图形，但它并没有在视图中显示图形。若我取文本值来显示，它会显示，但不会显示图形

Index.cshtml

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

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>

我不明白为什么会有这个问题。请帮帮我。

---

谢谢你。

我或多或少也遇到了同样的问题。。。我通过在HTML-{{initialize（）}中调用图形初始化来实现它。有点老套，但很管用。我或多或少也有同样的问题。。。我通过在HTML-{{initialize（）}中调用图形初始化来实现它。有点老套，但很管用。

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

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