[英]Stuck with integrating d3 with data
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>D3 Demo: SVG with data</title>
<script type="text/javascript" src="d3/d3.v3.js"></script>
<style type="text/css">
</style>
</head>
<body>
<script type="text/javascript">
var dataset = {
"entry":[
{"date": "2011-03-18T00:00:04"},
{"date": "2011-04-18T00:05:03"},
{"date": "2011-03-29T00:10:04"},
{"date": "2011-05-19T00:15:03"},
{"date":"2011-06-12T00:20:03"},
{"date": "2011-08-09T00:25:03"}
],
"entry" :[
{"date": "2012-03-18T00:00:04"},
{"date": "2012-04-18T00:05:03"},
{"date": "2012-03-29T00:10:04"},
{"date": "2012-05-19T00:15:03"},
{"date":"2012-06-12T00:20:03"},
{"date": "2012-08-09T00:25:03"}
]
}
console.log(dataset.entry);
var height = 600;
var width = 500;
var x = d3.time.scale().domain([new Date(2011, 0, 1,23,33,00), new Date(2013, 0, 1, 23, 59)]).range([0, width]);
var svg = d3.selectAll("body")
.append("svg")
.attr("width",width)
.attr("height",height)
.attr("shape-rendering","crispEdges");
svg.selectAll("body")
.data(dataset)
.enter()
.append("rect")
.attr("width", 4)
.attr("height",12)
.attr("x", function(d) { return x(new Date(d.entry.date)); } )
.attr("y",function(d,i){return i*10;})
.attr("fill","steelblue");
</script>
</body>
</html>
這是我創建的一個簡單文件。 目的是模仿甘特圖。 如您所見,數組中共有12個值。 我做錯了什么,什么也沒打印。
誰能指導我?
傳遞給d3選擇的數據應該是一個數組。 我認為您想要的是:
svg.selectAll("body")
.data(dataset.entry)
...
.attr("x", function(d) { return x(new Date(d.date)); } )
另外,刪除“數據集”的“輸入”屬性之一。 它們似乎在您當前的代碼中重復,我懷疑是復制/粘貼錯誤。
如果不是復制/粘貼錯誤,則不能定義兩個名稱相同的“ entry”元素-您需要將數據集轉換為數組。 IE瀏覽器:
var dataset = [ [ {"date": "blah" } ], [ {"date":"blah" } ] ];
並更改訪問數據的方式。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.