27

有一些示例可以从 d3.js 中的外部 json 文件获取数据。但是这些示例没有显示 json，所以我真的很想看看它是如何工作的。

我有这个 json 文件 test.json，它看起来像

[
    {"a":"-1.14","b":"4.14"},
    {"a":"-0.13","b":"1.38"},
    {"a":"-4.19","b":"1.43"},
    {"a":"-0.21","b":"3.34"}
]

我想用这些数据做一个散点图。

在 d3.js 脚本中。我添加到现在。

var width = 400;
var height = 400;

var x = d3.scale.linear()
    .domain ([-5, 5])
    .range([0, width]);
var y = d3.scale.linear()
    .domain ([-5, 5])
    .range([0, height]);

var chart = d3.select("body").append("svg")
    .attr("width", width+70)
    .attr("height", height+70)
    .attr("class", chart)
    .append("g")
        .attr("transform", "translate(30, 30)");


chart.selectAll("xline")
    .data(x.ticks(11))
    .enter().append("line")
        .attr("x1", x)
        .attr("x2", x)
        .attr("y1", 0)
        .attr("y2", height)
        .style("stroke", "#ccc");

chart.selectAll("yline")
    .data(y.ticks(11))
    .enter().append("line")
        .attr("y1", y)
        .attr("y2", y)
        .attr("x1", 0)
        .attr("x2", width)
    .style("stroke", "#ccc");

如果我使用这个数据集：

var dataset = [ [-1, -3], [2, 4], [3, -4], [-3, 1]];

我添加了这个，它工作正常。

   chart.selectAll("scatter-dots")
      .data(dataset)
      .enter().append("circle")
        .attr("cx", function (d) { return x(d[0]); } )
        .attr("cy", function (d) { return y(d[1]); } )
        .attr("r", 10)
        .style("opacity", 0.6);

我想知道如果我使用外部 json 文件，我应该如何更改调用数据的部分。我真的很感激有人能教我这个！非常感谢。

4

2 回答 2

28

尝试这样的事情

d3.json("data.js", function(data) {
alert(data.length)
});

其中 data.js 或 data.json 或任何你想调用它的东西，只要它有 js 内容就是你的 json 文件。还可以尝试阅读：https ://github.com/mbostock/d3/wiki/Requests 。所有使用 json 数据的代码都将从 json 回调函数中调用。

于 2012-05-13T19:52:33.733 回答
15

如果您更熟悉这些，也可以使用Jquery JSON 调用。或者您甚至可以只使用引用分配给 JSON 的变量的脚本标记，如下所示：

<script src="us-pres.json" type="text/javascript"></script>

us-pres.json 的开头是这样的：

var dataset = {"state":"US",...

只要您将 JSON 放入变量（集合）中，d3 并不真正关心您是如何做到的。一旦它在那里，你只需使用 d3.data(dataset)调用来分配它。

于 2012-05-14T18:53:11.163 回答