Question

我有这个位于服务器端的链接

http://www.tr-l6/STWebService/Service.svc/session/Fetchnodehistorybyname?strnodename=starbucks

以json格式接收数据，这是数据

{"Id":466,"Name":"korea",                                                                               
"Occurrences":
[{"OccurrenceDate":"\/Date(1398207600000+0100)\/","OccurrenceFrequency":27},    
 {"OccurrenceDate":"\/Date(1398726000000+0100)\/","OccurrenceFrequency":1},   
 {"OccurrenceDate":"\/Date(1398898800000+0100)\/","OccurrenceFrequency":4}, 
 {"OccurrenceDate":"\/Date(1399071600000+0100)\/","OccurrenceFrequency":303}]}

这是我用来绘制折线图的代码但是这个代码被编程为从同一台PC接收数据。它没有从服务器端检索数据......我的问题如何使用 Jquery 和 Ajax 来转换此代码以绘制通过使用上面提到的链接从服务器端检索数据来绘制折线图。请记住，我的json文件是嵌套的。这是完整的代码：

  <!DOCTYPE html>
  <meta charset="utf-8">
  <style>

  body {
  font: 10px sans-serif;
  margin: 0;
  }

   path.line {
   fill: none;
   stroke: #666;
   stroke-width: 1.5px;
  }

  path.area {
  fill: #e7e7e7;
  }

 .axis {
 shape-rendering: crispEdges;
  }

  .x.axis line {
  stroke: #fff;
  }

  .x.axis .minor {
  stroke-opacity: .5;
  }

  .x.axis path {
  display: none;
  }

  .y.axis line, .y.axis path {
  fill: none;
  stroke: #000;
  }

  </style>
  <body>

 <script src="http://d3js.org/d3.v3.min.js"></script>
 <script>

  var margin = {top: 80, right: 80, bottom: 80, left: 80},
  width = 960 - margin.left - margin.right,
  height = 500 - margin.top - margin.bottom;

  var parseDate1 = d3.time.format.iso.parse;

  // Scales and axes. Note the inverted domain for the y-scale: bigger is up!
  var x = d3.time.scale().range([0, width]),
  y = d3.scale.linear().range([height, 0]),
  xAxis = d3.svg.axis().scale(x).tickSize(-height).tickSubdivide(true),
  yAxis = d3.svg.axis().scale(y).ticks(4).orient("right");

   // An area generator, for the light fill.
  var area = d3.svg.area()
  .interpolate("monotone")
  .x(function(d) { return x(d.Occurrences.OccurrenceDate); })
  .y0(height)
  .y1(function(d) { return y(d.Occurrences.OccurrenceFrequency); });

  // A line generator, for the dark stroke.
  var line = d3.svg.line()
  .interpolate("monotone")
  .x(function(d) { return x(d.OccurrenceDate); })
  .y(function(d) { return y(d.OccurrenceFrequency); });

 var svg = d3.select("body").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("data3.json", function(error, data) {
    data.Occurrences.forEach(function(d){
    var dc 
    dc = d.OccurrenceDate.substring(6, 16)
     dc = new Date(dc*1000)
    d.OccurrenceDate= parseDate1(dc)
    d.OccurrenceFrequency = +d.OccurrenceFrequency

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

Answer 1

您可以使用d3检索JSON数据，如下所示;

d3.json("/path/to/json", function(d) {
    //rendering code
}

然后，在回调函数内（代替渲染代码），您可以使用变量＆＃34; d＆＃34;来访问JSON数据。

以下总结了在检索数据后要遵循的一般程序;

//Create a svg
svg = d3.select("selector_to_some_DOM_element").append("svg");

//Then append text for each data JSON entry
svg.selectAll(".yourClassNameHere")
        .data(d) //received data
        .enter()
        .text(function (d) { //add some text
            //using OccurrenceFrequency
            return d.OccurrenceFrequency
        });

您可以在http://pothibo.com/2013/09/d3-js-how-to-handle-dynamic-json-data/

阅读更详细的d3 JSON数据管理

如何使用D3.js对折线图进行编程，以显示从服务器端接收的数据？

1 个答案: