Javascript d3版本4，其中X刻度为刻度时间

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

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

const container=d3.select（“.app”）
常数数据=[{
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：新日期（d.x），
v:d.v
}))
常量x=d3.scaleTime（）.range（[0500]）.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]）
})
缩放（容器）

---

这里的问题只是您的范围：范围必须是一个包含两个元素的数组，最小元素和最大元素

话虽如此，只要改变：

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

致：

d3.extent

将使用该访问器函数返回一个数组，其中包含

formattedData

中的最大值和最小值

这是您的工作代码：

const container=d3.select（“.app”）
常数数据=[{
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：新日期（d.x），
v:d.v
}))
const x=d3.scaleTime（）.range（[0500]）.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]）
})
缩放（容器）

。作为控制台包装{最大高度：22%！重要；}

---

这里的问题只是您的范围：范围必须是一个包含两个元素的数组，最小元素和最大元素

话虽如此，只要改变：

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

致：

d3.extent

将使用该访问器函数返回一个数组，其中包含

formattedData

中的最大值和最小值

这是您的工作代码：

const container=d3.select（“.app”）
常数数据=[{
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：新日期（d.x），
v:d.v
}))
const x=d3.scaleTime（）.range（[0500]）.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]）
})
缩放（容器）

。作为控制台包装{最大高度：22%！重要；}

是的。（这不仅是一个正确的答案，也是对你的问题唯一可能的答案，没有任何代码）@GerardoFurtado我提供了一个jsbin请看是的，它是。（这不仅是一个正确答案，而且是你问题的唯一可能答案，没有任何代码）@GerardoFurtado我提供了一个jsbin请看一看Yep-忘记使用d3.extent.Yep-忘记使用d3.extent.Yep。