如何在 HTML 中使用外部 JSON 文件而不是硬编码的 JSON 文件？答案

【问题标题】：How to use a external JSON file instead of a hard coded JSON file in the HTML?如何在 HTML 中使用外部 JSON 文件而不是硬编码的 JSON 文件？
【发布时间】：2014-09-11 14:31:55
【问题描述】：

<!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 数据方法？

        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"}]

【问题讨论】：

标签： html json d3.js charts visualization

【解决方案1】：

您可以通过

将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.

【讨论】：

有没有办法如d3.json("data.json", type, function(error, data) {};
是的，你可以试试，但我认为最有可能是d3.json("data.json", function(data){});