繁体 English 中英

如何控制时间轴 d3.js 刻度之间的“固定宽度”？

[英]How to control 'Fixed width' between ticks in time axis d3.js?

原文 2022-09-26 16:13:16 8 0 javascript/ svg/ d3.js/ charts/ visualization

我正在考虑开始和结束时间，大约没有。 来自用户的刻度。 我希望刻度和域之间的固定宽度可以扩展以实现此目的但不会缩小。（我正在使用 nice() ）当开始和结束时间之间的差异以月、周、分钟或秒为单位时工作正常，但当差异大于20年。

当我给出输入日期（startDate：1/6/2001 和 endDate：1/6/2030 和 ticks=8）结束点合同。 当我给出输入日期（startDate：1/6/2003 和 endDate：1/6/2030 和 ticks=8）时，开始和结束点合同。 我希望这些扩展。 有没有办法来解决这个问题？

提供任何输入（当开始日期和结束日期之间的差异小于 5 年时找到）

这是我的代码

 var btn=document.querySelector(".form"); console.log("working"); let svg=d3.select(".body").append("svg").style("width","1200"); //taking values from user btn.addEventListener('submit',(event)=>{ event.preventDefault() svg.remove(); svg=d3.select(".body").append("svg").style("width","1200") const ticks=event.target["ticks"].value; const startTime=new Date(event.target["s-time"].value); const endTime=new Date(event.target["e-time"].value); const timeScale=d3.scaleTime().domain([startTime,endTime]).range([0,1000]).nice() let approxTicks=parseInt(ticks) if(;approxTicks) approxTicks=8. const sliderTicks=timeScale.ticks(approxTicks) //control tick const xAxis = g => g,style("transform","translate(50px.50px)").call(d3.axisBottom(timeScale).ticks(sliderTicks.length)) //control ticks svg.append('g').call(xAxis) })

 .body{ background-color:#ccc; width:1200px; height:400px; }

 <body> <script src="https://d3js.org/d3.v7.min.js"></script> <form class="form" > <div> Enter number of ticks</div> <input name="ticks" type="number"></input> <div>Enter start and end date for the axis</div> <input type="datetime-local" id="meeting-time" name="s-time" value="2002-06-12T19:30" min="2000-06-07T00:00" max="2022-06-14T00:00"> <input type="datetime-local" id="meeting-time" name="e-time" value="2018-06-12T19:30" min="2002-06-07T00:00" max="2030-06-14T00:00"> <button >Submit!</button> </form> <div class="body"></div> </body>