如何將Json字符串從mvc控制器傳遞到d3.js圖表​​？

Question

控制器：

public ActionResult JsonString() 
    { 
     var p = new Parser("ALL"); 
     return Content(p.BuildJson()); 
    } 

JSON：

[{"date":"28-Feb-14","count":2},{"date":"27-Feb-14","count":4},{"date":"26-Feb-14","count":4},{"date":"25-Feb-14","count":5},{"date":"24-Feb-14","count":5},{"date":"23-Feb-14","count":2},{"date":"22-Feb-14","count":7},{"date":"21-Feb-14","count":2},{"date":"20-Feb-14","count":3},{"date":"19-Feb-14","count":2},{"date":"18-Feb-14","count":6},{"date":"17-Feb-14","count":2},{"date":"16-Feb-14","count":2},{"date":"15-Feb-14","count":0},{"date":"14-Feb-14","count":2},{"date":"13-Feb-14","count":5},{"date":"12-Feb-14","count":4},{"date":"11-Feb-14","count":3},{"date":"10-Feb-14","count":4},{"date":"9-Feb-14","count":2},{"date":"8-Feb-14","count":5},{"date":"7-Feb-14","count":4},{"date":"6-Feb-14","count":12},{"date":"5-Feb-14","count":2},{"date":"4-Feb-14","count":0},{"date":"3-Feb-14","count":0},{"date":"2-Feb-14","count":0},{"date":"1-Feb-14","count":0},{"date":"31-Jan-14","count":0},{"date":"30-Jan-14","count":0}] 

的Javascript：

 $.ajax({ 
     url: '@Url.Action("JsonString", "Dashboard")', 
     type: 'GET', 
     success: function (dat) { 

     var data = jQuery.parseJSON(dat); 

     var margin = { top: 20, right: 20, bottom: 30, left: 50 }, 
     width = @graphWidth - margin.left - margin.right, 
     height = @graphHeight - margin.top - margin.bottom; 

     var parseDate = d3.time.format("%d-%b-%y").parse; 

     var x = d3.time.scale() 
      .range([0, width]); 

     var y = d3.scale.linear() 
      .range([height, 0]); 

     var xAxis = d3.svg.axis() 
      .scale(x) 
      .orient("bottom"); 

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

     var line = d3.svg.line() 
      .x(function (d) { return x(d.date); }) 
      .y(function (d) { return y(d.count); }); 

     var svg = d3.select("#chart").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 = data; ?????????????????????????????????????????????????? 

     x.domain(d3.extent(data, function(d) { return d.date; })); 
     y.domain(d3.extent(data, function(d) { return d.count; })); 

     svg.append("g") 
      .attr("class", "x axis") 
      .attr("transform", "translate(0," + height + ")") 
      .call(xAxis); 

     svg.append("g") 
      .attr("class", "y axis") 
      .call(yAxis) 
      .append("text") 
      .attr("transform", "rotate(-90)") 
      .attr("y", 6) 
      .attr("dy", "1.21em") 
      .style("text-anchor", "end") 
      .style("font-size", "18px") 
      .text("Occurences"); 

     svg.append("path") 
      .datum(data) 
      .attr("class", "line") 
      .attr("d", line); 

     svg.append("text") 
      .attr("x", (width/2)) 
      .attr("y", 50 - (margin.top)) 
      .attr("text-anchor", "middle") 
      .style("font-size", "26px") 
      .style("text-decoration", "underline") 
      .text("Incidents/Time"); 

      alert(data); 
      alert(dat); 
     } 

Answer 1

所有你需要做的是以下幾點：

public ActionResult JsonString() 
{ 
    var p = new Parser("ALL"); 
    return Content(p.BuildJson(), "application/json"); 
} 

提供p.BuildJson()返回json字符串，不指定內容類型，默認爲text/plain。