Question

我目前正在使用.dsv方法将csv加载到d3。 csv包含两列：year和avg_price。年列只有1901、1902、1903，并且不包含月份或日期。

year, avg_price
1901, 25.20
1902, 28.30
1903, 19.25
1904, 21.50

d3.dsv导入将返回一个字符串，但是我想将此信息转换为datetime对象（仅作为“ year”），以便可以将结果绘制成条形图。

我已经尝试在导入时运行以下内容，但是它似乎不起作用。

var parseTime = d3.timeParse("%Y")

v5是否有很好的资源来说明如何将部分日期解析为图表的日期对象？谢谢。

Answer 1

您可以在函数中使用new Date(d.year, 0, 1)将第一列转换为JavaScript Date对象（每年的一月）。

（请注意tsv字符串中的空格）。

示例：

const csv = `year,avg_price
1901,25.20
1902,28.30
1903,19.25
1904,21.50`;

const data = d3.csvParse(csv, d => ({
  year: new Date(+d.year, 0, 1),
  avg_price: +d.avg_price,
}));

const format = d3.timeFormat('%Y');

const ul = d3.select("#app").append('ul');


ul.selectAll('li')
  .data(data)
  .join('li')
  .text(d => `${format(d.year)}: ${d.avg_price}`);

<script src="https://d3js.org/d3.v5.min.js"></script>
<div id="app"></div>

D3 v5仅与Year一起使用

1 个答案: