d3.js & json - 简单的示例代码?

Posted

技术标签:

【中文标题】d3.js & json - 简单的示例代码?【英文标题】:d3.js & json - simple sample code? 【发布时间】:2012-05-19 22:41:31 【问题描述】:

在 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 文件,我想知道如何更改调用数据的这部分。我真的很感激有人能教我这个!非常感谢。

【问题讨论】:

【参考方案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 回调函数中调用。

【讨论】:

这在 2013 年 6 月 5 日对我有帮助 @laycat: 是否可以在本地渲染它...我的意思是如果我在服务器上没有 json 而只是在我的本地机器上我该怎么做.. 我什至不能给你一个小提琴..bcoz你必须先在服务器上上传你的json...... @MESSIAH 我可能错了,但这取决于您的框架。对我来说,我正在使用 django,我可以从 localhost 目录中读取 json 到 views.py 的 django 并将其作为上下文传递给“模板”,即 .html 页面 @MESSIAH 我可能错了,但是您可以在 localhost html 页面上手动生成 json 数据并通过 d3.json 获取它 这是旧的,但万一有人遇到这个,d3.json() 方法的语法在 D3 版本 5 中更改。D3 版本 4:d3.json("some_source_url", function(response) ... D3 版本 5:d3.json("some_source_url").then(function(response) ...跨度> 【参考方案2】:

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

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

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

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

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

【讨论】:

... 并在 "cx""cy" 属性中执行 return x(d.property1) return y(d.property2)

以上是关于d3.js & json - 简单的示例代码?的主要内容,如果未能解决你的问题,请参考以下文章

在D3.js处理的JSON数据中使用HTML标记

D3.js 中的简单散点图示例?

处理 d3.js 轴上的日期

在 d3.js 中配置固定布局的静态图

如何在 d3.js 中同时自动移动节点和链接

d3 js - 在没有 http get 的情况下加载 json