Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 17.02.2020, 15:44
Аспирант
Отправить личное сообщение для gsdev99 Посмотреть профиль Найти все сообщения от gsdev99
 
Регистрация: 03.02.2019
Сообщений: 72

Как правильно обновить данные в d3?
Всем привет. Подскажите, пожалуйста, как правильно решить следующую задачу. У меня есть график, по оси y при перерендере приходит точка, по которой я отрисовываю оранжевую горизонтальную линию. Сейчас проблема в следующем при изменении состояния у меня не перерисовывается линия, а как бы запоминается предыдущее состояния и дорисовывается. Если нажать на button3, а затем на button2, данный баг виден. Перерисовка реализуется в компоненте Axis. Буду благодарен вашей помощи.
https://codepen.io/gsdev99/pen/dyoMQmZ
Фактически ошибка в этом компоненте:
const Axis = ({ scale, orient, transform, width, tickSelected }) => {
  
    const ref = useRef(null)

    const renderAxis = () => {
        let axis = null

        if (orient === 'bottom') {
            axis = d3.axisBottom(scale)
        }

        if (orient === 'left') {
            axis = d3.axisLeft(scale)
        }

        d3.select(ref.current).call(axis)
    }

    const updateAxis = () => {

        if (orient === 'left') {
          
          if (!tickSelected) {
              
          }
          
          console.log('tickSelected', tickSelected)
          
            const axis = d3
                .axisLeft(scale)
                .tickSize(-width)

            const g = d3.selectAll(`.${orient}`)
                .call(axis)
            
            g
                .selectAll('.tick line')
                .filter((d) => {
                    if (d === tickSelected) {
                        return d === tickSelected
                    }

                    if (d === tickSelected) {
                        return d === tickSelected
                    }

                    return null
                })
                .attr('class', 'is-active')
        }

        if (orient === 'bottom') {
          
            const axis = d3
                .axisBottom(scale)
                .ticks(2)
             
            d3.select(ref.current)
                .call(axis)
        }
    }

    useEffect(() => {
        renderAxis()
    }, [])


    useEffect(() => {
        updateAxis()
    })

    return (
        <g
            ref={ref}
            transform={transform}
            className={`${orient} axis`}
        />
    )
}

Последний раз редактировалось gsdev99, 17.02.2020 в 16:46.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
как в Mysql через PDO обновить данные если поле json Sergey1986 Серверные языки и технологии 8 23.11.2018 15:35
Как правильно получить данные json (перевести в общую оласть видимости) Blondinka Общие вопросы Javascript 3 14.10.2015 21:36
Как вы относитесь к наркоманам? Maxmaxmaximus7 Оффтопик 7 05.02.2014 13:29
Как правильно очистить maxlength в input? Маэстро Events/DOM/Window 10 22.06.2011 18:14
Как правильно оформить Send() Алекс97 AJAX и COMET 20 30.10.2008 19:19