[英]How to access JSON data using d3?
我有一個JSON數據類型,該數據類型存儲在模型中以傳遞給視圖。 我也有一個條形圖,我想用它來顯示數據。 但是,我只想顯示一些字段,即SupplierName和Query。 我已經按照d3教程進行操作,以獲取圖形,但這是我第一次將其付諸實踐。
有人知道如何執行此操作嗎?
控制器:
public ActionResult ValueBySupplierAndClaimType(int ClientID, int ReviewPeriodID, int StatusCategoryID) {
ValueBySupplierAndClaimTypeViewModel model = new ValueBySupplierAndClaimTypeViewModel {
ReportData = reportRepo.GetValueBySupplierAndClaimType(ClientID, ReviewPeriodID, StatusCategoryID),
ReportTitle = "Dashboard Breakdown",
ReportDescription = "Breakdown for " + reviewRepo.GetAllReviewsByClientID(ClientID).Where(r => r.ReviewID == ReviewPeriodID).Select(r => r.ReviewPeriod).FirstOrDefault()
};
model.output = JsonConvert.SerializeObject(model.ReportData, Formatting.Indented);
return View("ValueBySupplierAndClaimType", model);
JSON:
[
{
"SupplierID": 4336,
"SupplierName": "Test1",
"AccountNo": 09579
"Claim": null,
"Normal": null,
"Query": 1000.0000,
"Formal": null,
"Strong": null,
"Unsubstantiated": null
},
{
"SupplierID": 4357,
"SupplierName": "Test2 ",
"AccountNo": 00124
"Claim": null,
"Normal": null,
"Query": 9000.0000,
"Formal": null,
"Strong": null,
"Unsubstantiated": null
},
{
"SupplierID": 4395,
"SupplierName": "Test3 ",
"AccountNo": 00001
"Claim": null,
"Normal": null,
"Query": null,
"Formal": null,
"Strong": null,
"Unsubstantiated": null
}
]
D3:
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
var margin = { top: 20, right: 20, bottom: 30, left: 40 },
width = 960 - margin.left - margin.right,
height = 500 - margin.top - margin.bottom;
var x = d3.scale.ordinal()
.rangeRoundBands([0, width], .1);
var y = d3.scale.linear()
.range([height, 0]);
var xAxis = d3.svg.axis()
.scale(x)
.orient("bottom");
var yAxis = d3.svg.axis()
.scale(y)
.orient("left")
.ticks(10, "%");
var svg = d3.select("body").append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
d3.csv(@Model.output, type, function (error, data) {
if (error) throw error;
data.forEach(function(d) {
//(function(d) {return d.SupplierName})
//(function(d) {return d.Query})
x.domain(data.map(function (d) { return d.SupplierName }));
y.domain([0, d3.max(data, function (d) { return d.Query })]);
})
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
.call(xAxis);
svg.append("g")
.attr("class", "y axis")
.call(yAxis)
.append("text")
.attr("transform", "rotate(-90)")
.attr("y", 6)
.attr("dy", ".71em")
.style("text-anchor", "end")
.text("Query");
svg.selectAll(".bar")
.data(data)
.enter().append("rect")
.attr("class", "bar")
.attr("x", function (d) { return x(d.SupplierName); })
.attr("width", x.rangeBand())
.attr("y", function (d) { return y(d.Query); })
.attr("height", function (d) { return height - y(d.Query); });
});
function type(d) {
d.Query = +d.Query;
return d;
}
</script>
我嘗試查看一些答案,但是嘗試實現它們,但是似乎沒有任何效果
您的代碼有兩個問題:
JSON格式
JsonConvert.SerializeObject()
返回JSON(如名稱所示)而不是CSV。 因此,您應該使用d3.json
,但是
請求
d3.csv
和d3.json
將URL作為第一個參數,並觸發XMLHttpRequest以獲取數據,在加載時解析數據並將其傳遞給回調。
您的@Model.output
包含帶有完整JSON的字符串。 您不需要請求數據,因為您已經將其作為字符串。 您只需要像這樣使用JSON.parse()
解析字符串:
...
//d3.csv(@Model.output, type, function (error, data) {
try {
var data = JSON.parse("@Model.output");
data.forEach(function(d){
x.domain(data.map(function (d) { return d.SupplierName }));
y.domain([0, d3.max(data, function (d) { return d.Query })]);
});
...
} catch(e){
...
}
確保使用try-catch,因為JSON.parse可能因無效的JSON而失敗。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.