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

Question

當我在時間刻度上調用rescaleX時，返回的比例具有無效日期的域。 是否可以使用d3版本4縮放時間刻度？

我已經制作了一個簡單的JSBIN來演示這個問題。 請使用深灰色矩形上的鼠標滾輪進行縮放並觀察控制台（您的瀏覽器控制台為JSBIN無法正確打印無效日期！）。

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

 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(dx), v: dv })) const x = d3.scaleTime().range([0, 500]).domain(formattedData, d => dx) const zoom = d3.zoom().on('zoom', () => { const newX = d3.event.transform.rescaleX(x) console.log(newX.domain(), newX.domain()[1]) }) zoom(container) 

 <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> 

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 ，使用該訪問器功能。

這是你的工作代碼：

 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(dx), v: dv })) const x = d3.scaleTime().range([0, 500]).domain(d3.extent(formattedData, d => dx)); const zoom = d3.zoom().on('zoom', () => { const newX = d3.event.transform.rescaleX(x) console.log(newX.domain(), newX.domain()[1]) }) zoom(container) 

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

 <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>