Javascript 如何使用d3、json和折线图绘制折线图？

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

提前感谢您的帮助

首先，我使用此链接从服务器（）检索数据

其次，这是接收到的数据

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

可变宽度=960，
高度=500；
var color=d3.scale.category20（）；
//我的第一个问题是，在本节中，我应该使用什么来代替线形图中的d3.layout.force？
var-force=d3.layout.force（）
。收费（-120）
.linkDistance（30）
.尺寸（[宽度、高度]）；
var svg=d3.选择（“正文”）.追加（“svg”）
.attr（“宽度”，宽度）
.attr（“高度”，高度）；
函数updateData（）{
//这是一个url
斯特鲁里变种
="(http://www.tr-l6/STWebService/Service.svc/session/Fetchnodehistorybyname?       
strnodename=starbucks）”；
//使用jquery获取json数据集，因为我无法使d3.json正常工作
//使用Firefox/Chrome（但使用IE也可以）
//这可能是一个jsonp/跨域问题，需要进一步解决
//在WCF web配置文件中进行调整
//json（strURI，函数（错误，图形）{
$.ajax({
键入：“获取”，
网址：strURI，
数据类型：“jsonp”，
成功：函数（图）{
//第二，我用什么来代替武力
武力
.nodes（图.nodes）
.links（graph.links）
.start（）；
//这是我画折线图的代码
无功直流
//本节介绍如何将unix时间戳转换为iso格式。
dc=d.发生日期.子串（6,16）
dc=新日期（dc*1000）
dc=parseDate1（dc）；
d、 发生频率=+d.发生频率；
返回d
});
//绘图轴
x、 域（d3.extent（数据，函数（d）{返回d.OccurrenceDate；}））；
y、 域（[0，d3.max（数据，函数（d）{返回d.OccurrenceFrequency；}）]）；
追加（“路径”）
.基准（数据）
.attr（“类别”、“区域”）
.attr（“d”，区域）；
svg.append（“g”）
.attr（“类”、“x轴”）
.attr（“变换”、“平移（0）”、“高度+”）
.呼叫（xAxis）；
svg.append（“g”）
.attr（“类”、“y轴”）
.呼叫（yAxis）
.append（“文本”）
.attr（“变换”、“旋转（-90）”）
.attr（“y”，6）
.attr（“dy”，“.71em”）
.style（“文本锚定”、“结束”）
});  

如果您想要折线图，请查看此图。您不能使用强制导向布局来实现折线图。我在绘制折线图方面没有问题。我面临从服务器导航数据的问题？您应该更具体地说明您的问题。