日期标签和分隔线被覆盖 [英] Date labels and partition line are getting overlaid

问题描述

我正在尝试将播放/暂停+滑块功能添加到以下工作代码中:

它们正在覆盖.

解决方案

此问题是由 drawplot(data)函数中的以下代码行引起的，该代码行在滑块每次移动时都会更新.它每次都添加刻度线.注释掉以下代码:

 //svg.append('g')//.attr('class'，'axis xAxis')//.attr('transform'，`translate(0，$ {margin.top})`)//.call(xAxis)//.selectAll('.tick line')//.classed('origin'，d => d == 0); 

每次使用 drawplot 时， yearText 都会发生相同的事情，它不会更新日期，而是附加新的日期.

所有这些附加项都应位于 drawplot 之外，或将更新分隔到其他函数中.

I am trying to add play/pause + slider functionality to the below-working code:

https://blockbuilder.org/ninjakx/f2b02646a6c72a99789371079d188f0f

So far I have managed to add that functionality but the thing is my date info on the right side is not getting updated and also the vertical lines are getting added up.

This is what I have done: https://blockbuilder.org/ninjakx/2b6fcd7607b510f0c0b6467e663ff764

I am using the same code. I don't know what's causing this problem? and how to solve this.

Edit:

That date thing is fixed now.

  yearText.html(sDate.toDateString()); 

I was using sDate (starting Date) not the current one.

Edit2:

This is the problem:

They are getting overlaid.

解决方案

The issue is caused by the following lines of code in your drawplot(data) function which updates every time the slider moves. It is appending the tick marks everytime. Comment out the following code:

//      svg.append('g')
//        .attr('class', 'axis xAxis')
//        .attr('transform', `translate(0, ${margin.top})`)
//        .call(xAxis)
//        .selectAll('.tick line')
//        .classed('origin', d => d == 0);

The same thing is happening with your yearText everytime you are using drawplot, instead of updating the date, it appends new dates.

The append for all of these should be outside the drawplot or to separate the updates to a different function.

这篇关于日期标签和分隔线被覆盖的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！