Javascript 如何使用D3.js编程折线图以可视化从服务器端接收的数据？
我有这个链接，它在服务器端 要接收json格式的数据，以下是数据Javascript 如何使用D3.js编程折线图以可视化从服务器端接收的数据？,javascript,jquery,ajax,json,d3.js,Javascript,Jquery,Ajax,Json,D3.js,我有这个链接，它在服务器端 要接收json格式的数据，以下是数据 {"Id":466,"Name":"korea", "Occurrences": [{"OccurrenceDate":"\/Date(1398207600000+0100)\/","OccurrenceFrequency":27}, {"OccurrenceDa
{"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}]}
<!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>
身体{
字体：10px无衬线；
保证金：0；
}
路径线{
填充：无；
行程：#666；
笔划宽度：1.5px；
}
道路面积{
填充：#e7e7e7；
}
.安讯士{
形状渲染：边缘清晰；
}
.x.轴线{
冲程：#fff；
}
.x轴小调{
笔画不透明度：.5；
}
.x轴路径{
显示：无；
}
.y轴线，.y轴路径{
填充：无；
行程：#000；
}
var margin={顶部：80，右侧：80，底部：80，左侧：80}，
宽度=960-margin.left-margin.right，
高度=500-margin.top-margin.bottom；
var parseDate1=d3.time.format.iso.parse；
//天平和轴。注意y标度的倒域：越大越好！
var x=d3.time.scale（）.range（[0，width]），
y=d3.刻度.线性（）.范围（[高度，0]），
xAxis=d3.svg.axis（）.scale（x）.tickSize（-height）.ticksublide（true），
yAxis=d3.svg.axis（）.scale（y）.ticks（4）.orient（“right”）；
//区域生成器，用于灯光填充。
var area=d3.svg.area（）
.插入（“单调”）
.x（函数（d）{返回x（d.accurrences.accurrencedate）；}）
.y0（高度）
.y1（函数（d）{返回y（d.发生次数.发生频率）；}）；
//线条生成器，用于黑暗笔划。
var line=d3.svg.line（）
.插入（“单调”）
.x（函数（d）{返回x（d.OccurrenceDate）；}）
.y（函数（d）{返回y（d.发生频率）；}）；
var svg=d3.选择（“正文”）.追加（“svg”）
.attr（“宽度”，宽度+边距。左侧+边距。右侧）
.attr（“高度”，高度+边距。顶部+边距。底部）
.附加（“g”）
.attr（“转换”、“平移”（+margin.left+）、“+margin.top+”）；
d3.json（“data3.json”），函数（错误，数据）{
数据.事件.forEach（函数（d）{
无功直流
dc=d.发生日期.子串（6,16）
dc=新日期（dc*1000）
d、 发生日期=解析日期1（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（“文本锚定”、“结束”）
});
d3.json("/path/to/json", function(d) {
//rendering code
}
//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
});