D3：将数据转换为数字

Question

我在 D3 中有一个条形图，我想在 x 轴上显示一些日期。我从数据库中得到的是两个字段，我必须将它们连接起来才能得到年份和月份。见下文。这个想法是，对于 d.date 字段，我得到 NaN，尽管我已将其转换为数字。

data.forEach(function (d) {
    d.date = "20" + d.yy + "/" + d.mm;
    // coerce to number
    d.value = +d.value;
    d.date = +d.date;
    console.log(d.value);
    console.log(d.date);
});

x.domain(data.map(function (d) {
    console.log("HEelllppp!!!!",d.date);
    return d.date;
}));

y.domain([0, d3.max(data, function (d) {
    return d.value;
})]);

有人有想法吗？提前致谢！

Answer 1

您可以使用unary plus 将字符串转换为数字：

console.log(+"12345")
console.log(+true)
console.log(+"17.9876")

但是，您尝试使用非数字字符转换字符串，例如“2016/02”。它将返回 NaN：

console.log(+"2016/01")
console.log(+"1a2b3c")

解决方案：对日期使用序数比例，将它们作为字符串传递（惰性解决方案），或使用 D3 解析日期（最好）：

var dateString = "2016/04";//this is a string
var format = d3.time.format("%Y/%m");
var date = format.parse(dateString);//this is a date
var dateTick = format(date);
console.log("date is: " + date)
console.log("but you can show it as: " + dateTick)

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>

Answer 2

您应该转换为日期，而不是转换为数字：

var dates = data.map(function(d){ return new Date(d.yy + "/" + d.mm); })
var xScale = d3.time.scale().domain(d3.extent(dates))

如果我使用var data = [ { yy: 2016, mm: 01}, {yy: 2016, mm: 02 }];，我会从d3.min(xScale.domain()) 中得到以下信息：

Mon Feb 01 2016 00:00:00 GMT-0500 (EST)