d3.timeParse() 日期、月份和年份问题
Posted
技术标签:
【中文标题】d3.timeParse() 日期、月份和年份问题【英文标题】：d3.timeParse() Issue with date, month & year 【发布时间】：2022-01-13 15:51:33 【问题描述】：我正在尝试为 eur/usd（y 轴）和时间（x 轴）创建 x 和 y 比例。 我试图修改我的 d3.timeParse() 以使其正常工作，但我遇到了问题。 我还添加了 JSON 数据外观的图像示例。 我试图将 timeParse() 输入与 JSON 日期数据匹配，但没有运气。 任何意见表示赞赏。
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.1.1/d3.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<title>D3.js</title>
<meta charset="UTF-8">
<style type="text/css"></style>
</head>
<body>
<script type="text/javascript"></script>
<script>
$.getJSON("https://jsonblob.com/api/904557502042226688", function (data)
console.log(data);
plotCurrencyData(data);
);
// Executed once file has downloaded
function plotCurrencyData(data)
// SVG
var margin = top:50, right: 50, bottom: 50, left: 50,
width = 900 - margin.left - margin.right,
height = 670 - margin.top - margin.bottom;
// timeParse()
// var parseDate = d3.timeParse("%d/%m/%Y");
var parseDate = d3.timeParse("%d/%m/%Y");
var y = d3.scaleLinear()
.domain(d3.extent(data, function(d) return d["GBP/EUR"]))
.range([height, 0]);
var x = d3.scaleTime()
.domain(d3.extent(data, function(d) return parseDate(d["Date"]); ))
.range([0, width]);
</script>
</body>
</html>
【问题讨论】：
您的对象示例具有属性EUR/USD Close，但您的代码引用GBP/EUR
【参考方案1】：
用reduce代替d3.extent计算时间范围：
const width = 300;
d3.json('https://jsonblob.com/api/904557502042226688')
.then(d => onLoad(d));
const onLoad = data =>
const range = data.reduce((r, d) =>
const time = d3.timeParse("%d/%m/%Y")(d.Date).getTime();
if (!r) return [time, time];
return [Math.min(time, r[0]), Math.max(time, r[1])];
, null);
const xScale = d3.scaleTime()
.domain(range.map(t => new Date(t)))
.range([0, width]);
const xAxis = d3.axisBottom(xScale);
d3.select('svg')
.append('g')
.attr('transform', 'translate(50, 50)')
.call(xAxis);
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>
<svg width='400' height='100' />【讨论】：
以上是关于d3.timeParse() 日期、月份和年份问题的主要内容，如果未能解决你的问题，请参考以下文章
在数据库中，如果只需要年份和月份，您会使用日期字段还是年份和月份字段？
仅将带有年份和月份的字符串转换为仅适用于年份和月份的日期格式