在 D3 Javascript 可视化中使用 JSON 数据
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7008025/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Using JSON data in D3 Javascript visualisation
提问by Glinkot
I'm working through the use of JSON data to drive some charts made with the javascript D3 visualisation tools (http://mbostock.github.com/d3/). I've setup my WCF service, and this code in Jquery works fine:
我正在使用 JSON 数据来驱动一些使用 javascript D3 可视化工具 (http://mbostock.github.com/d3/) 制作的图表。我已经设置了我的 WCF 服务，并且 Jquery 中的这段代码工作正常：
$('#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 has a function for using JSON data also, but I haven't yet had success. It looks like this:
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);
Pretty much all the code is from the 'bar chart' example in the D3 download, which works fine. If I declare the data manually (per the array of integers above) it works, but not with the JSON command. I also simplified the data returned so it consisted only of integers. Ultimately though, I'd want to be able to access JSON data with an 'id field', 'value field' etc and reference these in the code.
几乎所有代码都来自 D3 下载中的“条形图”示例，它运行良好。如果我手动声明数据（根据上面的整数数组）它可以工作，但不能使用 JSON 命令。我还简化了返回的数据，因此它只包含整数。但最终，我希望能够使用“id 字段”、“值字段”等访问 JSON 数据，并在代码中引用这些数据。
Anyone have any ideas on whether my syntax is incorrect? I realise the function (data) is meant to be used to add data to the chart, but the code in this example works so I'd prefer to start from that point.
有人对我的语法是否不正确有任何想法吗？我意识到函数 (data) 旨在用于向图表添加数据，但本示例中的代码有效，因此我更愿意从这一点开始。
回答by Ricardo Marimon
D3 has its own json getting function for completeness of the framework but you don't have to use it. You could try your d3 chart with the jQuery $.getJSONand it should work. This is what I do since most of my development is done using jQuery.
D3 有它自己的 json 获取函数以确保框架的完整性，但您不必使用它。你可以用 jQuery 试试你的 d3 图表，$.getJSON它应该可以工作。这就是我所做的，因为我的大部分开发都是使用 jQuery 完成的。
As for your example, the d3.jsonsemantics is exactly the same as the $.getJSON. It is asynchronous call in which the function is called after the data is retrieved. Try something like this:
至于你的例子，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);
});
