Question

我想将这个折线图示例用于我的新格式数据。

旧数据格式和x轴：

  const DATA1 = [9.5, 2, 5, 7, 5, 3, 0];
  const LABELS = [
    'monday',
    'tuesday',
    'wednesday',
    'thursday',
    'friday',
    'saturday',
    'sunday'
  ];

新数据格式::

  // parse the date / time
  const parseDate = d3.timeParse('%Y%m%d')
  const formatTime = d3.timeFormat('%y/%m/%d')

  const data = [
    {dataX: '20171016', dataY: 54.13},
    {dataX: '20171017', dataY: 50.13},
    {dataX: '20171018', dataY: 70.13},
    {dataX: '20171019', dataY: 53.98}]
  data.map(d => {
    d.dataX = parseDate(d.dataX)
    d.dataY = +d.dataY
  })

但我仍然面临新格式的问题。

Answer 1

你必须使用d3.scaleTime作为你的x轴： https://bl.ocks.org/d3indepth/8948c9936c71e63ef2647bc4cc2ebf78 然后当您使用数据值绑定属性时，您必须使用：

xScale(d.dataX)

而不是：

xScale(LABELS[i])

使用y值相同

d => yScale(d.dataY)

而不是

d => yScale(d)

d3 v4折线图数据

1 个答案: