[英]Using JSON data in D3 Javascript visualisation
我正在使用 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 也有一個 function 用於使用 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 字段”、“值字段”等訪問 JSON 數據並在代碼中引用這些數據。
有人對我的語法是否不正確有任何想法嗎? 我意識到 function (數據)旨在用於向圖表添加數據,但此示例中的代碼有效,因此我更願意從這一點開始。
D3 有自己的 json 獲得 function 以確保框架的完整性,但您不必使用它。 您可以使用 jQuery $.getJSON
嘗試您的 d3 圖表,它應該可以工作。 這就是我所做的,因為我的大部分開發都是使用 jQuery 完成的。
至於您的示例, d3.json
語義與$.getJSON
。 它是異步調用,其中 function 在檢索到數據后被調用。 嘗試這樣的事情:
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);
});
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.