Я предполагаю, что вы знакомы с basi c JavaScript и DOM.
Понимание объединения данных
При добавлении к диаграмме , Я постараюсь описать, что происходит, но так, как вы этого не ожидали. Важно помнить, что мы будем запускать этот код несколько раз после изменения данных. Вот как мы работаем с новыми элементами данных.
svg
.selectAll("line") // 1.
.data(link_set) // 2.
.enter() // 3.
.append("line");
- Мы создаем объект, содержащий все элементы строки: выбор , основная концепция, которой D3 манипулирует. Когда вы используете D3, вы не управляете DOM напрямую. Вы воздействуете на эти абстрактные представления DOM, которые являются этими выборками. Родителем этого пустого выделения является SVG.
- Создайте соединение данных . Выбор, возвращаемый 1.: пусто . Когда мы используем data (), мы присоединяем его к переданным данным. Это дает три варианта выбора. Подождите, что?
Это много, поэтому давайте вернемся немного назад:
- Выбран не элемент DOM. Выделение - это абстракция, которая представляет элементы DOM.
- С d3 вы действуете на выбор. Вместо того, чтобы напрямую изменять DOM, вы манипулируете этим выбором.
Когда мы выполняем соединение
данных , D3 возвращает три варианта выбора:
- выбор для ввода: элементы, которые были в данных, но не в DOM.
- выбор обновления: элементы, которые были в данных и DOM, но значения которых изменились.
- выбор выхода: элементы, которые больше не в данных, а в DOM.
Допустим, у нас есть 3 элемента: [1,2,3] Тогда при первом запуске этого кода:
DOM : empty
x x x
data: [1,2,3]
enter selection: 3 elements (1,2,3)
update selection: empty
exit selection: empty
Но допустим, мы запускаем этот код во второй раз. К этому моменту элементы DOM уже будут существовать, так как это выглядит?
DOM : line line line
| | |
| | |
data: [1, 2, 3]
enter selection: empty
update selection: empty
exit selection: empty
Давайте запустим ваш код в третий раз, но добавим несколько новых элементов:
DOM : line line line
| | |
| | | x
data: [1, 2, 3, 4]
enter selection: 1 element (4)
update selection: empty
exit selection: empty
Теперь есть некоторые новые данные. Код манипулирует только этим новым элементом. Все последующие действия, такие как добавление, происходят только с новыми данными .
Как реализовать это в вашем коде?
Подводя итог, если вы хотите обновить несколько раз , затем вызовите тот же код с разными данными. Обычный способ - поместить код в функцию с данными в качестве параметра:
function update(data) {
// Put all chart drawing code here.
svg
.selectAll("line")
.data(link_set)
.enter()
.append("line");
}
Важно понимать, что эта функция будет вызываться во всех сценариях ios. Он будет вызываться для первого рендеринга с исходными данными, а затем при изменении данных. Вы захотите поместить весь свой код рисования диаграммы в эту функцию.
Самое главное, из-за того, что мы описали ранее, этот код всегда будет работать. Другими словами:
- ваш код был процедурным: нарисуйте линии, обновите данные, нарисуйте их снова.
- Код D3 является декларативным: один раз сообщите коду, что происходит, когда мы добавляем / обновлять / удалять данные, а затем вызывать этот код каждый раз, когда мы хотим, и D3 позаботится об этом.
Это основной принцип, лежащий в основе объединения данных.
Его использование может выглядеть так:
// Initial render.
data = [1,2,3]
update(data)
// Update data
data.push(4)
update(data)
Обратите внимание, что наш пример управляет только добавлением элементов. Если вам нужно обновить или удалить элементы, вам также понадобятся обработчики для них при каждом отдельном выборе. В этом случае вы можете использовать функцию join ().