Question

当我在时间刻度上调用rescaleX时，返回的比例具有无效日期的域。是否可以使用d3版本4缩放时间刻度？

我已经制作了一个简单的JSBIN来演示这个问题。请使用深灰色矩形上的鼠标滚轮进行缩放并观察控制台（您的浏览器控制台为JSBIN无法正确打印无效日期！）。

https://jsbin.com/nucasireva/edit?html,js,output

＆＃13;

const container = d3.select('.app')

const data = [{
    x: '2015-05-12',
    v: 12
  },
  {
    x: '2015-05-13',
    v: 13
  },
  {
    x: '2015-05-14',
    v: 15
  },
  {
    x: '2015-05-15',
    v: 16
  }
]

const formattedData = data.map(d => ({
  x: new Date(d.x),
  v: d.v
}))

const x = d3.scaleTime().range([0, 500]).domain(formattedData, d => d.x)

const zoom = d3.zoom().on('zoom', () => {
  const newX = d3.event.transform.rescaleX(x)
  console.log(newX.domain(), newX.domain()[1])
})


zoom(container)

＆＃13;

<meta charset="utf-8">
<meta name="viewport" content="width=device-width">

<div class='app' style='background: grey;width:500px;height:300px;'></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.2.3/d3.min.js"></script>

＆＃13;

Answer 1

这里的问题只是缩放的域：域必须是一个包含2个元素的数组，最小值和最大值。

话虽如此，只需改变：

const x = d3.scaleTime()
    .range([0, 500])
    .domain(formattedData, d => d.x);

要：

const x = d3.scaleTime()
    .range([0, 500])
    .domain(d3.extent(formattedData, d => d.x));

d3.extent将使用该访问函数返回formattedData中具有最大值和最小值的数组。

这是您的工作代码：

＆＃13;

const container = d3.select('.app')

const data = [{
  x: '2015-05-12',
  v: 12
}, {
  x: '2015-05-13',
  v: 13
}, {
  x: '2015-05-14',
  v: 15
}, {
  x: '2015-05-15',
  v: 16
}]

const formattedData = data.map(d => ({
  x: new Date(d.x),
  v: d.v
}))

const x = d3.scaleTime().range([0, 500]).domain(d3.extent(formattedData, d => d.x));

const zoom = d3.zoom().on('zoom', () => {
  const newX = d3.event.transform.rescaleX(x)
  console.log(newX.domain(), newX.domain()[1])
})

zoom(container)

＆＃13;

.as-console-wrapper { max-height: 22% !important;}

＆＃13;

<div class='app' style='background: grey;width:500px;height:300px;'></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.2.3/d3.min.js"></script>

＆＃13;

d3版本4 rescaleX，其中X比例是scaleTime

1 个答案: