如何使用D3.js编写折线图以可视化从服务器端接收的数据？

Question

I have this link which is on the server side 我有此链接在服务器端

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

to receive a data in json format , this is the data 接收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}]}

This the code I used to draw a line chart BUT this code is programmed to recieve the data from the same pc . 这是我用来绘制折线图的代码，但此代码经过编程，可以从同一台PC接收数据。 It's doesn't retrieve the data from the server side... My question how Can I use Jquery and Ajax to transform this code to draw a line chart by retrieving the data from the server side using that link which is mentioned above . 它不是从服务器端检索数据...我的问题是如何使用上述链接从服务器端检索数据，如何使用Jquery和Ajax转换此代码以绘制折线图。 bare in mind , that my json file is nested one. 没想到，我的json文件是嵌套的。 This is the full code : 这是完整的代码：

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

You can retreive JSON data using d3 as follows; 您可以使用d3检索JSON数据，如下所示；

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

and then, inside the callback function (in place of rendering code) you can access the JSON data using the variable "d". 然后，在回调函数内部（代替渲染代码），您可以使用变量“ d”访问JSON数据。

The following summerizes the general procedure to follow after retreiving the data; 下面总结了检索数据后应遵循的一般步骤；

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

You can read more detailed d3 JSON data management at http://pothibo.com/2013/09/d3-js-how-to-handle-dynamic-json-data/ 您可以在http://pothibo.com/2013/09/d3-js-how-to-handle-dynamic-json-data/阅读更多详细的d3 JSON数据管理

如何使用D3.js编写折线图以可视化从服务器端接收的数据？

问题描述

1 个解决方案

解决方案1
0 已采纳 2014-05-22 10:36:02

如何使用D3.js编写折线图以可视化从服务器端接收的数据？

问题描述

1 个解决方案

解决方案1 0 已采纳 2014-05-22 10:36:02

解决方案1
0 已采纳 2014-05-22 10:36:02