Как перезагрузить элемент svg D3 после установки состояния набора данных в REACT - PullRequest
Новая
       7

Как перезагрузить элемент svg D3 после установки состояния набора данных в REACT

0 голосов
/ 27 сентября 2018

Привет, ребята, я играю с D3.js и React, пытаясь создать танцующую гистограмму. Как мне перезагрузить svg D3 после установки состояния набора данных в REACT?вот мой 

codepen: https://codepen.io/mav1283/pen/LJwWVw?editors=0010

Не обращайте внимания на отображение состояния сверху, это временная секция отладки.

1 Ответ

0 голосов
/ 27 сентября 2018

Первая проблема: loadBarGraph должен быть обратным вызовом после выполнения setState .

Элементы, добавленные к выбору "enter", больше не добавляются автоматически восновной (обновленный) выбор.Теперь вам нужно явно создать выборку слияния , вызвав метод слияния для выбора "ввод": 

    const rect = this.svg.selectAll('rect').data(dataset);
    rect.exit().remove();
    rect.enter()
        .append('rect')
        .merge(rect)
        .attr('width', 25)
        .attr('height', (d, i) => {
            console.log(d);
            return 3 * d;
        })
        .attr('x', (d, i) => i * 30)
        .attr('y', (d, i) => h - d)
        .attr('fill', 'green');

Новый код Pen: https://codepen.io/imsontosh/pen/yRBXKg?editors=0010

...