D3 v7时间刻度从日期限制的平移和缩放

huangapple
go评论97阅读模式
英文:

D3 v7 timeScale paning and zooming from-to date limit

问题

D3 v7时间刻度平移和缩放日期限制

大家好
我有一个问题。
我需要为自定义视频播放器创建一个带有限日期的时间刻度。
例如，从2021年1月1日到现在。
我的代码是：

  1. const domainEnd = new Date()
  3. const xScale = d3.scaleTime()
  4.   .domain([new Date(domainEnd.getTime() - (30*60*1000)), domainEnd])
  5.   .range([0, width]);
  7. const zoomMin = 1;
  8. const zoomMax = (domainEnd.getTime() - domainStart.getTime()) / (1000 * 60)
  10. const zoom = d3.zoom()
  11.   .scaleExtent([zoomMin, zoomMax])
  12.   .on('zoom', (event) => {
  13.     const transformer = event.transform.rescaleX(xScale2)
  14.     axis.scale(transformer)
  15.     axisG.call(axis)
  16.   });
  18. const svg = d3.select('#scale')
  19.   .append('svg')
  20.   .attr('width', width + margin.left + margin.right)
  21.   .attr('height', height + margin.top + margin.bottom)
  22.   .call(zoom)
  24. const axis = d3.axisBottom(xScale)
  26. const axisG = svg.append('g')
  27.   .attr('class', 'x-axis')
  28.   .attr('transform', `translate(0,${height})`)
  29.   .call(axis)

问题是：
如何限制在两个日期之间缩放和平移刻度？谢谢

英文:

D3 v7 timeScale pan and zoom from-to date limit

Hello everyone
I have an issue.
I need to have a time scale for a custom video player with limited dates.
For ex. from 2021, 1, 1 to Date.now
My code is:

  1.     const domainStart = new Date(2021, 1, 1)
  2.     const domainEnd = new Date()
  4.     const xScale = d3.scaleTime()
  5.       .domain([new Date(domainEnd.getTime() - (30*60*1000)), domainEnd])
  6.       .range([0, width]);
  8.     const zoomMin = 1;
  9.     const zoomMax = (domainEnd.getTime() - domainStart.getTime()) / (1000 * 60)
  11.     const zoom = d3.zoom()
  12.       .scaleExtent([zoomMin, zoomMax])
  13.       .on('zoom', (event) => {
  14.         const transformer = event.transform.rescaleX(xScale2)
  15.         axis.scale(transformer)
  16.         axisG.call(axis)
  17.       });
  19.     const svg = d3.select('#scale')
  20.       .append('svg')
  21.       .attr('width', width + margin.left + margin.right)
  22.       .attr('height', height + margin.top + margin.bottom)
  23.       .call(zoom)
  25.     const axis = d3.axisBottom(xScale)
  27.     const axisG = svg.append('g')
  28.       .attr('class', 'x-axis')
  29.       .attr('transform', `translate(0,${height})`)
  30.       .call(axis)

The question is:
How can I limit scale zooming and panning between two dates? Thx

答案1

得分: 0

好的，以下是代码部分的中文翻译：

  1. // 我处理了这个问题。解决方案如下：
  3. const margin = { top: 0, right: 20, bottom: 60, left: 20 };
  4. const width = 600;
  5. const height = 100;
  7. const domainStart = new Date('2022-01-10T00:00:01');
  8. const domainEnd = new Date();
  10. const xScale: ScaleTime<number, number> = d3
  11.   .scaleTime()
  12.   .domain([domainStart, domainEnd])
  13.   .rangeRound([0, width]);
  15. const zoomMin = 1;
  16. const zoomMax = (domainEnd.getTime() - domainStart.getTime()) / (1000 * 60);
  18. const zoom = d3.zoom()
  19.   .scaleExtent([zoomMin, zoomMax])
  20.   .translateExtent([[0, 0], [width, height]])
  21.   .extent([[0, 0], [width, height]])
  22.   .on('zoom', ({ transform }) => {
  23.     axis.scale(transform.rescaleX(xScale));
  24.     axisG.call(axis);
  25.   });
  27. const svg = d3.select('#scale')
  28.   .append('svg')
  29.   .attr('width', width)
  30.   .attr('height', height + margin.top + margin.bottom)
  31.   .call(zoom);
  33. const axis = d3.axisBottom(xScale);
  35. const axisG = svg.append('g')
  36.   .attr('class', 'x-axis')
  37.   .attr('clip-path', 'url(#clip)')
  38.   .attr('transform', `translate(0,${height})`)
  39.   .call(axis);
  41. const k = (domainEnd.getTime() - domainStart.getTime()) / (1000 * 60 * 30);
  42. const centerDate = xScale.invert((width) / 2);
  44. zoom.scaleTo(svg, k);
  45. zoom.translateTo(svg, centerDate.getTime(), 0);

请注意，我只翻译了代码部分，没有包括其他内容。如果您需要进一步的帮助，请随时提出。

英文:

Ok I handled this issue. the solution:

  1. const margin = {top: 0, right: 20, bottom: 60, left: 20}
  2. const width = 600;
  3. const height = 100;
  4. const domainStart = new Date(&#39;2022-01-10T00:00:01&#39;)
  5. const domainEnd = new Date()
  6. const xScale: ScaleTime&lt;number, number&gt; = d3
  7. .scaleTime()
  8. .domain([domainStart, domainEnd])
  9. .rangeRound([0, width])
  10. const zoomMin = 1;
  11. const zoomMax = (domainEnd.getTime() - domainStart.getTime()) / (1000 * 60);
  12. const zoom = d3.zoom()
  13. .scaleExtent([zoomMin, zoomMax])
  14. .translateExtent([[0, 0], [width, height]])
  15. .extent([[0, 0], [width, height]])
  16. .on(&#39;zoom&#39;, ({transform}) =&gt; {
  17. axis.scale(transform.rescaleX(xScale))
  18. axisG.call(axis)
  19. });
  20. const svg = d3.select(&#39;#scale&#39;)
  21. .append(&#39;svg&#39;)
  22. .attr(&#39;width&#39;, width)
  23. .attr(&#39;height&#39;, height + margin.top + margin.bottom)
  24. .call(zoom)
  25. const axis = d3.axisBottom(xScale)
  26. const axisG = svg.append(&#39;g&#39;)
  27. .attr(&#39;class&#39;, &#39;x-axis&#39;)
  28. .attr(&#39;clip-path&#39;, &#39;url(#clip)&#39;)
  29. .attr(&#39;transform&#39;, `translate(0,${height})`)
  30. .call(axis);
  31. const k = (domainEnd.getTime() - domainStart.getTime()) / (1000 * 60 * 30);
  32. const centerDate = xScale.invert((width) / 2);
  33. zoom.scaleTo(svg, k)
  34. zoom.translateTo(svg, centerDate.getTime(), 0)

huangapple
  • 本文由 发表于 2023年5月31日 23:39:56
  • 转载请务必保留本文链接：https://go.coder-hub.com/76375215.html
  • d3.js
  • javascript
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定