在D3JavaScript可视化中使用JSON数据
我正在使用JSON数据来驱动一些用javascript D3可视化工具制作的图表(http://mbostock.github.com/d3/). 我已经设置了WCF服务,Jquery中的这段代码运行良好:在D3JavaScript可视化中使用JSON数据,javascript,json,wcf,d3.js,jsonp,Javascript,Json,Wcf,D3.js,Jsonp,我正在使用JSON数据来驱动一些用javascript D3可视化工具制作的图表(http://mbostock.github.com/d3/). 我已经设置了WCF服务,Jquery中的这段代码运行良好: $('#getDataItems').click(function () { var $DataList = $('#DataList'); $DataList.empty().appendLi('Loading...');
$('#getDataItems').click(function () {
var $DataList = $('#DataList');
$DataList.empty().appendLi('Loading...');
// Get the JsonP data
$.getJSON('http://localhost:65025/CustomersService.svc/GetMyDataItems?callback=?', null, function (somedata) {
alert('Received ' + somedata.length + ' Items');
$DataList.empty();
$.each(somedata, function () {
$DataList.appendLi(this.ID + " - " + this.Value);
}); // end each dataitem function
}); // end success function
}); // end #getDataItems.click
D3也有一个使用JSON数据的函数,但我还没有成功。看起来是这样的:
// this works
//var data = [4, 8, 15, 16, 23, 42];
// this doesn't
var data = function () {
d3.json('http://localhost:65025/CustomersService.svc/GetMyDataItems?callback=?',
function (data) } })
}
//.. rest of the example is known working code so its here only for reference
// create the chart class as an append to the body element.
var chart = d3.select("body")
.append("svg:svg")
.attr("class", "chart")
.attr("width", 420)
.attr("height", 20 * data.length);
// Set the width relative to max data value
var x = d3.scale.linear()
.domain([0, d3.max(data)])
.range([0, 420]);
var y = d3.scale.ordinal()
.domain(data)
.rangeBands([0, 120]);
chart.selectAll("rect")
.data(data)
.enter().append("svg:rect")
.attr("y", y)
.attr("width", x)
.attr("height", y.rangeBand());
chart.selectAll("text")
.data(data)
.enter().append("svg:text")
.attr("x", x)
.attr("y", function (d) { return y(d) + y.rangeBand() / 2; })
.attr("dx", -3) // padding-right
.attr("dy", ".35em") // vertical-align: middle
.attr("text-anchor", "end") // text-align: right
.text(String);
几乎所有代码都来自D3下载中的“条形图”示例,该示例运行良好。如果我手动声明数据(根据上面的整数数组),它可以工作,但不使用JSON命令。我还简化了返回的数据,使其只包含整数。但最终,我希望能够使用“id字段”、“value字段”等访问JSON数据,并在代码中引用这些数据
有人知道我的语法是否不正确吗?我意识到这个函数(data)是用来向图表中添加数据的,但本例中的代码是有效的,所以我更愿意从这一点开始。D3有自己的json获取函数,以确保框架的完整性,但您不必使用它。您可以使用jQuery
$.getJSON
尝试d3图表,它应该可以工作。这就是我所做的,因为我的大部分开发都是使用jQuery完成的
对于您的示例,d3.json
语义与$.getJSON
完全相同。它是一种异步调用,在该调用中,在检索数据后调用函数。试着这样做:
d3.json(
'http://localhost:65025/CustomersService.svc/GetMyDataItems?callback=?',
function (jsondata) {
// create the chart here with
// the returned data
console.log(jsondata);
var data = jsondata.map(function(d) { return d.Value; });
console.log(data);
});
你好谢谢你。如果我要使用jquery版本(在第一个代码段中),以'somedata'变量结束-我如何将值放入类似于'var data=[1,2,3]的数组中?可能JSON每个“记录”包含两个字段——名称和值。那么,如何将JSON值转换为与“数据”相同的格式来完成绘图呢?对不起,我希望这有道理,我正在努力解释它!:)如果您的web服务返回类似于
[1,2,3]
的内容,那么您应该在数据中包含该信息。使用firebug和console.log(data)
查看您得到的确切信息。从jQUery示例中,数据将作为ID
和值
对进行检索。我已经更新了答案,以反映如何从中获取数据。您添加的最后一行是我知道一定需要的链接。此外,console.log也非常有用!非常感谢你的帮助,伙计。