如何使用d3和json以及折线图绘制折线图？

Question

我正在尝试操纵力导向图代码来可视化折线图。从服务器端检索数据。我的问题是，我在代码中的某些部分遇到了一些困难，我在每个部分留下了我遇到麻烦的评论，所以我真的希望并期待帮助我完成这项任务。

提前感谢您的帮助

首先，我使用此链接从服务器（http://www.tr-l6/STWebService/Service.svc/session/Fetchnodehistorybyname?strnodename=starbucks）

检索数据

其次，这是收到的数据

   {"Id":641,"Name":"starbucks",                                                                                                                                                                                                                                                     
   "Occurrences":
    [{"OccurrenceDate":"\/Date(1398294000000+0100)\/","OccurrenceFrequency":53},  
     {"OccurrenceDate":"\/Date(1398380400000+0100)\/","OccurrenceFrequency":227},
     {"OccurrenceDate":"\/Date(1398466800000+0100)\/","OccurrenceFrequency":137},  
     {"OccurrenceDate":"\/Date(1398726000000+0100)\/","OccurrenceFrequency":49},
     {"OccurrenceDate":"\/Date(1398898800000+0100)\/","OccurrenceFrequency":16}]}

这是我尝试用来实现目标的代码。我对每个部分留下了评论。 看看吧。

  <script src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
  <script src="http://d3js.org/d3.v3.min.js"></script>
  <script>

  var width = 960,
      height = 500;

  var color = d3.scale.category20();

  //My first problem,what should I use instead of d3.layout.force in linechart in this     section?

   var force = d3.layout.force()
  .charge(-120)
  .linkDistance(30)
  .size([width, height]);

  var svg = d3.select("body").append("svg")
     .attr("width", width)
     .attr("height", height);


     function updateData() {
     //This is a url 
var strURI                                     
        ="(http://www.tr-l6/STWebService/Service.svc/session/Fetchnodehistorybyname?       
          strnodename=starbucks)";

    // use jquery to get the json dataset because I cannot get d3.json to work    
            //  with Firefox/Chrome (but it is OK with IE)
    // this is probably a jsonp / cross domain issue that requires further 
            //tweaking in the WCF web,config file
    // d3.json(strURI,function(error, graph) {

    $.ajax({

            type: "GET",
            url: strURI,
            dataType: 'jsonp',
            success: function (graph) {
                    //Second one, What suppose I use instead of force 
                force
                      .nodes(graph.Nodes)
                      .links(graph.Links)
                      .start();
                  //This is my code to draw a line chart 

                 var dc  
                 //This section to convert unix timestamp into a iso format.

                 dc = d.OccurrenceDate.substring(6, 16)
                 dc = new Date(dc*1000)
             dc= parseDate1(dc);   

                 d.OccurrenceFrequency = +d.OccurrenceFrequency;
                 return d
                 });
       //Drawing axis 
       x.domain(d3.extent(data, function(d) { return d.OccurrenceDate; }));
       y.domain([0, d3.max(data, function(d) { return d.OccurrenceFrequency; })]);


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

       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", ".71em")
      .style("text-anchor", "end")
      });  

     </script>