我在理解如何以 JSON 格式设置日期和时间格式时遇到问题。
我正在尝试在 D3.js 代码段中使用该文件> 代码。感谢您的任何解释，因为我是 JSON 的新手，并且对 D3 也比较陌生。
[
{"BeaconMac":"Office","UserMac":"22", "Date": "3.6.2015", "Time":"8:09"},
{"BeaconMac":"Office","UserMac":"42", "Date": "3.6.2015", "Time": "8:10"},
{"BeaconMac":"TreatmentRoom","UserMac:":"60", "Date": "3.6.2015", "Time":"8:11"}
]
这是我正在实现的代码。当我运行它时它没有显示任何内容。
<!--
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<p>Hello world</p>
</body>
</html>-->
<!DOCTYPE html>
<html lang="en">
<head>
<title>D3 Tutorial</title>
<!--let browser know where to find library-->
<script src = "http://d3js.org/d3.v3.min.js"></script>
</head>
<body>
<script>
d3.json("data.json", function(data){
var canvas = d3.select("body").append("svg")
.attr("width", 500)
.attr("height", 500);
canvas.selectAll("rect")
.data(data)
.enter()
.append("rect")
.attr("width", function(d){return d.Time * 10;})
.attr("height", 48)
.attr("y", function(d, i){return d.Date * 50;})
.attr("fill", "blue");
/*canvas.selectAll("text")
.data(data)
.enter()
.append("text")
.attr("fill","white")
.attr("y", function(d,i){return i * 50;})
.text(function(d){return d.name + 24;})*/
})
</script>
</body>
</html>
最佳答案
您是正确的，日期需要在可用之前进行处理，因为它们目前是字符串形式。因此，您需要创建日期对象或者可能是数字。因此，对于初学者来说，您需要循环数据，以便可以访问和修改每个日期。加载数据后即可执行此操作:
d3.json("data.json", function(data){
data.forEach(function(d) {
// Here d is an entry in the data array
console.log(d.Date); // logs "3.6.2015" 3 times
// Now do something with d.Date...
});
问题是要做什么，这在某种程度上取决于您如何需要这些数据。但您可能想要创建 Date 对象，相当于调用 new Date(2015, 2, 6)。
D3 具有方便的函数，可以将字符串格式化和/或解析为 Date 对象。例如:
var formatter = d3.time.format("%m.%d.%Y")
formatter 现在是一个函数，如果您使用日期对象调用它，例如 formatter(new Date()) 将返回一个字符串，例如“02.10. 2015”。您可以阅读有关如何使用 d3 API reference 中的 % 字符指定该格式的更多信息。 .
但是，您需要执行与上面示例相反的操作；您想要将格式化字符串转换为日期对象。使用 formatter 函数也是可能的:
formatter.parse("2.6.2015")
这将返回一个设置为 2015 年 2 月 6 日的 Date 对象。
把它们放在一起，从一开始的循环看起来像这样:
d3.json("data.json", function(data) {
var formatter = d3.time.format("%m.%d.%Y");
data.forEach(function(d) {
d.Date = formatter.parse(d.Date);
});
})
关于javascript - 在 D3.js 中使用的 JSON 文件格式，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/35324577/