D3嵌套格式设置日期不正确

D3 nest formatting date incorrectly

本文关键字：日期 不正确 设置 格式 嵌套 D3      更新时间：2023-09-26

我从D3.js嵌套功能中得到了一些奇怪的行为，似乎键和汇总正在将test_date从date对象转换为字符串。

这是我的代码：

var data = [{
    "test_type": "x1",
    "test_date": "2014-07-15"
}, {
    "test_type": "x3",
    "test_date": "2014-07-16"
}, {
    "test_type": "x2",
    "test_date": "2014-07-27"
}, {
    "test_type": "x1",
    "test_date": "2014-07-28"
}];
var parseDate = d3.time.format("%Y-%m-%d").parse;

data.forEach(function(d) {
    d.test_date = parseDate(d.test_date);
});
var result = d3.nest()
    .key(function(d) {
        return d.test_type;
    })
    .key(function(d) {
        return d.test_date;
    })
    .rollup(function(leaves) {
        return leaves.length;
    })
    .entries(data);

结果是：

[{
    "key": "x1",
    "values": [{
        "key": "Tue Jul 15 2014 00:00:00 GMT-0600 (Mountain Daylight Time)",
        "values": 1
    }, {
        "key": "Mon Jul 28 2014 00:00:00 GMT-0600 (Mountain Daylight Time)",
        "values": 1
    }]
}, {
    "key": "x3",
    "values": [{
        "key": "Wed Jul 16 2014 00:00:00 GMT-0600 (Mountain Daylight Time)",
        "values": 1
    }]
}, {
    "key": "x2",
    "values": [{
        "key": "Sun Jul 27 2014 00:00:00 GMT-0600 (Mountain Daylight Time)",
        "values": 1
    }]
}]

我需要嵌套的键值是日期对象，而不是字符串。有人知道是什么原因造成的吗？

这是一个关于这个问题的问题http://jsfiddle.net/2ryahc9L/1/

函数（和对象）d3.time.format以两种方式工作：

  • d3.time.format('%Y-%m-%d').parse('2014-08-29')将返回一个Date对象。它使用该格式来了解如何解释作为参数给定的字符串
  • d3.time.format('%Y-%m-%d')(new Date(2014, 7, 29))将返回字符串，格式为2014-08-29'

此外，d3.nest中的密钥将始终被强制为字符串。您需要将这两种形式结合起来，以获得所需的行为。当做

我找到了一个对我有效的解决方案。我也遇到了类似的问题。我想用时间戳作为关键字来嵌套数据。AmeliaBR写道，键是字符串。但是，我想使用键作为对象，因为它应该是我图表的x轴。

var data = [{
    "test_type": "x1",
    "test_date": "2014-07-15"
}, {
    "test_type": "x3",
    "test_date": "2014-07-16"
}, {
    "test_type": "x2",
    "test_date": "2014-07-27"
}, {
    "test_type": "x1",
    "test_date": "2014-07-15"
}];
var parseDate = d3.time.format("%Y-%m-%d").parse;

我使用另一个日期字段，仅用于嵌套数据的键，而不将数据解析为日期/时间。

data.forEach(function(d) {
    d.key_date = d.test_date;
    d.test_date = parseDate(d.test_date);
});
var result = d3.nest()
    .key(function(d) {
        return d.key_date;
    })
    .rollup(function(leaves) {
        return leaves.length;
    })
    .entries(data);

对于result，我将再次添加test_date作为对象，因为key_date是一个字符串。

result.forEach(function(d) {
    d.test_date = parseDate(d.key);
});

我不知道这是不是一个好方法。如果没有，请提出建议。谢谢

相关文章：