<!DOCTYPE html>
<meta charset="utf-8">
<style>
path {
stroke: steelblue;
stroke-width: 1;
fill: none;
}
.axis {
shape-rendering: crispEdges;
}
.x.axis line {
}
.x.axis .minor {
stroke-opacity: .5;
}
.x.axis path {
display: none;
}
.y.axis line, .y.axis path {
fill: none;
stroke: #000;
}
</style>
<div id="graph" class="aGraph" style="position:absolute;top:0px;left:0; float:left;">
<script src="http://d3js.org/d3.v3.min.js"></script>
<script>
var m = [80, 80, 80, 80]; // margins
var w = 1000 - m[1] - m[3]; // width
var h = 400 - m[0] - m[2]; // height
var data = [3, 6, 2, 7, 5, 2, 0, 3, 8, 9, 2, 5, 9, 3, 6, 3, 6, 2, 7, 5, 2, 1, 3, 8, 9, 2, 5, 9, 2, 7];
这是在html代码中使用JSON文件，这是很容易理解的，但是如果我想使用与HTML页面同一文件目录中的外部JSON文件，我需要更改什么方法才能读取它从文件目录中获取 JSON 文件而不是使用上面的 var data 方法？
var x = d3.scale.linear().domain([0, data.length]).range([0, w]);
var y = d3.scale.linear().domain([0, 10]).range([h, 0]);
var line = d3.svg.line()
.x(function(d,i) {
console.log('Plotting X value for data point: ' + d + ' using index: ' + i + ' to be at: ' + x(i) + ' using our xScale.');
return x(i);
})
.y(function(d) {
console.log('Plotting Y value for data point: ' + d + ' to be at: ' + y(d) + " using our yScale.");
return y(d);
})
var graph = d3.select("#graph").append("svg:svg")
.attr("width", w + m[1] + m[3])
.attr("height", h + m[0] + m[2])
.append("svg:g")
.attr("transform", "translate(" + m[3] + "," + m[0] + ")");
var xAxis = d3.svg.axis().scale(x).tickSize(-h).tickSubdivide(true);
graph.append("svg:g")
.attr("class", "x axis")
.attr("transform", "translate(0," + h + ")")
.call(xAxis);
var yAxisLeft = d3.svg.axis().scale(y).ticks(4).orient("left");
graph.append("svg:g")
.attr("class", "y axis")
.attr("transform", "translate(-25,0)")
.call(yAxisLeft);
graph.append("svg:path").attr("d", line(data));
</script>
</div>
下面是我想从文件目录中读取的 JSON 文件，而图表的 x 轴将是年份，图表的 y 轴将是案例。
[{"countryName":"Afghanistan","year":"1960","cases":"887"},{"countryName":"Afghanistan","year":"1965","cases":"218"}]
最佳答案
您可以通过
将 json 文件包含在 html 中<script src="thejsonFile.js"></script>
和json文件
var jsonObject = [{"countryName":"Afghanistan","year":"1960","cases":"887"},{"countryName":"Afghanistan","year":"1965","cases":"218"}];
并在您的函数中使用jsonObject。
或者也可以通过ajax调用
$.get('thejsonFile.js', function(data){
var jsonObject = JSON.parse(data);
//then your functions
});
thejsonFile.js 应该像这样
[{"countryName":"Afghanistan","year":"1960","cases":"887"},{"countryName":"Afghanistan","year":"1965","cases":"218"}];
//without declaration.
关于html - 如何使用外部 JSON 文件而不是 HTML 中的硬编码 JSON 文件？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/24859119/