Добавление и удаление данных при панорамирование гистограмму в D3

Question

У меня есть большой набор данных в массив, который переводит в около миллиона 6 пикселов шириной баров,

Учитывая, что около 130 баров вписываться в 800 пикселей экрана, я необходимо отображать только часть данных за раз. Затем, когда пользователь нажимает на диаграмму, будут добавлены новые данные, а невидимые данные будут удалены. Пользователь может перемещаться вправо или влево, чтобы данные могли входить и выходить с обеих сторон диаграммы.

Я чувствую, что решение включает в себя D3's enter и exit, но я не уверен, как его реализовать.

Одна идея, которую я получил, - использовать Array.prototype.concat и перерисовать на кастрюле. Еще одна идея - использовать Array.prototype.slice. Надеюсь, они достаточно быстры.

Есть несколько примеров?

Answer 1

Нет примеров, о которых я знаю. Грубо, вам нужно будет сделать следующее.

• Нарисуйте начальную гистограмму. Передайте только данные, которые вы будете отображать (т. Е. Первые 130 точек данных, если ваш экран имеет ширину 800 пикселей).
• На кастрюле получить перевод для кастрюли. Перемещение x соответствует определенному числу баров. Удалите это множество точек данных с начала вашего массива данных и добавьте их к концу.
• Передайте этот новый массив данных D3 и перерисуйте. This tutorial должен дать вам несколько указателей. Не забудьте передать ключевую функцию в .data(), чтобы он знал, как сопоставлять данные с элементами DOM.
• Подобные вещи на последующих кастрюлях. Выясните, сколько баров было подделано и соответственно изменило массив данных (например, с использованием slice и concat - не имеет значения). Перерисовать полосы.

Концепция очень похожа на то, что сделано в учебнике, с которым я связан, за исключением того, что перерисовка не запускается таймером, а событием панорамирования.

Answer 2

Существует в основном два способа сделать это. Во-первых, вы рисуете все 1M-бары, используя svg, и полагаетесь на svg, встроенный в панорамирование. Другим является то, что вы рисуете 130 баров и перерисовываете каждый раз, когда пользователь работает. enter() и exit() полезны для выполнения действий с элементами данных в вашем наборе, которые входят или выходят из сцены с момента последнего отображения. (d3 определяет, какие элементы «новый», вызывая функцию предиката для каждого элемента. Функция имеет значение по умолчанию, но может быть предоставлена ​​пользователем.) Фактически вам не нужно использовать их здесь, если вы не хотите быть фантазией. Вы можете просто выбрать все исправления из последней ничьей и .data() с вашими новыми данными и предоставить обычные вызовы для рисования прямоугольников.