d3.js和json - 简单示例代码？

Question

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

我有一个名为test.json的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文件，我应该如何更改调用数据的这一部分。非常感谢有人可以教教我！非常感谢。

- clerksx

Answer 1

尝试像这样做

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

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

- paxRoman

---

2013年6月5日，这对我很有帮助。 - laycat

@laycat: 是否可以在本地渲染...我的意思是，如果我没有服务器上的JSON，只有在我的本地机器上，我该怎么做呢？ 我甚至不能给你一个fiddle..因为你必须先将你的JSON上传到服务器上... - HIRA THAKUR

@MESSIAH，我可能错了，但这取决于你的框架。对我来说，我正在使用django，我可以在views.py中从本地主机目录读取json，并将其作为上下文传递给“模板”即.html页面。 - laycat

@MESSIAH 我可能错了，但是你可以在本地主机的HTML页面上手动生成JSON数据，并通过d3.json获取它。 - laycat

这可能有点过时了，但如果有人遇到这个问题，需要注意的是，在D3版本5中，d3.json()方法的语法已经发生了变化。D3版本4： d3.json("some_source_url", function(response) { ... }D3版本5： d3.json("some_source_url").then(function(response) {...} - Everett

Answer 2

如果您更熟悉Jquery JSON调用，也可以使用Jquery JSON调用。 或者您甚至可以只使用指向被分配为JSON的变量的脚本标签，如下所示：

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

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

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

只要将JSON存储在变量（集合）中，d3实际上并不关心您如何做到这一点。一旦存储在那里，您只需使用d3的.data(dataset)调用进行赋值即可。

- strack

---

在 "cx" 和 "cy" 属性中，执行 return x(d.property1) 和 return y(d.property2)。 - Rafael Emshoff