Question

我在 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>

Answer 1

你是正确的，日期需要在可用之前进行处理，因为它们目前是String形式。因此，您需要创建Date对象或其中的Numbers。因此，对于初学者，您需要循环数据，以便您可以访问和修改每个日期。您可以在加载数据后立即执行此操作：

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")

将返回Date对象设置为2015年2月6日。

总而言之，从一开始的循环看起来像这样：

d3.json("data.json", function(data) {
  var formatter = d3.time.format("%m.%d.%Y");
  data.forEach(function(d) {
    d.Date = formatter.parse(d.Date);
  });
})

Answer 2

我对D3一无所知，但你的“日期”肯定不是JavaScript Date对象。如果您在Chrome中打开JavaScript控制台（作为示例），很容易看到JavaScript希望JSON中的日期是什么样的：

var myDate = new Date();

console.log(myDate);
VM415:2 Wed Feb 10 2016 13:09:29 GMT-0700 (MST)

myDate.toJSON();
"2016-02-10T20:09:29.056Z"

您在JSON中拥有的不是Date对象，您只需要具有日期和时间标签的字符串。 Date对象可以表示一个对象中的日期和时间。

很可能D3对于日期和时间有一个完全不同的想法，但如果他们正在寻找一个实际的JavaScript Date对象，则需要更改JSON中的内容。

在D3.js中使用的JSON文件格式

2 个答案: