我如何使用D3.js编程线图来可视化从服务器端接收的数据

How can I program a line chart using D3.js to visualise a data which is received from a server side ?

本文关键字：服务器 可视化 端接 数据 何使用 D3 js 编程      更新时间：2023-09-26

服务器端有这个链接

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>

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

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

，然后，在回调函数中(代替呈现代码)，您可以使用变量"d"访问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数据管理
相关文章：