English for D3.js Developers
Словник для розробників, які створюють візуалізації даних за допомогою D3. js — вибір, з’ єднання даних, масштабування і переходи — для команд, які обговорюють код діаграм англійською мовою.
D3.js — це бібліотека JavaScript для прив’ язки даних безпосередньо до елементів DOM — зазвичай SVG — і маніпулювання ними на основі цих даних. На відміну від бібліотек графіків вищого рівня, D3 виставляє свою власну ментальну модель: вибір, з’єднання і масштаби, частково запозичені з функціональних концепцій обробки даних. Ця ментальна модель має справжню криву навчання, і її словник зводить з розуму навіть досвідчених розробників JavaScript. Якщо ваша команда створює нетипові діаграми або панелі керування за допомогою D3, ось англійська версія, яка вам знадобиться для обговорення.
Selections
** Selection ** — оболонка навколо одного або декількох елементів DOM, до яких можна приєднати методи D3, подібна до об’ єкта jQuery, але побудована навколо прив’ язки даних.
“Не кешувати вибір поза функцією оновлення — перевибір при кожному відтворенні, щоб він відображав поточний DOM, а не застарілу посилання.”
** Поєднання методів ** — виклик послідовності методів D3 у вибраному діапазоні, кожен з яких повертає вибраний діапазон, щоб наступний виклик міг виконати дію на ньому.
- “Ланцюг читається згори вниз, як намір: виберіть групу, приєднайте дані, встановіть атрибути — зберігайте його таким, щоб його було легко читати, не згортайте його в один рядок.” *
Приєднання даних
Вхід, оновлення, вихід
** data join ** є основним шаблоном D3 для узгодження набору даних з елементами DOM, розділяючи результат на три віртуальні вибірки.
- “Коли з’ являються нові точки даних, вони потрапляють у поле вибору enter — саме сюди ми додаємо нові кола. Існуючі точки, які змінилися, знаходяться у ** оновленні *. Точки, вилучені з набору даних, з’являються в exit, де ми запускаємо fade-out і вилучаємо елемент.”
Ключова функція
** key function ** вказує D3, як знайти відповідність елементів даних існуючим елементам DOM у оновленнях, замість знайомства за індексом масиву.
“Без функції ключів, D3 збігався за індексом і використовував неправильні смуги, коли ми сортували дані — додаючи
d => d.id, оскільки ключ виправив мігнення.”
Приєднатися до скорочення
Метод .join() є більш коротким способом обробки входу/оновлення/виходу в одному виклику, введений для заміни старої трикрокової схеми.
“Ми мігрували старий шаблон
.enter().append()до.join()— та ж поведінка, але намір набагато ясніше для будь-кого, хто читає його вперше.”
Шкіра і кістки
** Масштаб ** — функція, яка відображає область (діапазон значень ваших даних) у діапазон (позиції пікселів, кольори, радіуси) — математичне ядро будь- якої діаграми D3.
- “Смужки виглядали неправильно, поки ми не помітили, що область масштабу y не оновлюється після надходження нових даних — вона все ще масштабується до старого максимального значення.” *
** Домен проти діапазону ** — домен є вхідним простором (наприклад, від 0 до 1000 продажів), діапазон є вихідним простором (наприклад, від 0 до 400 пікселів); ця пара є найбільш заплутаною концепцією у D3.
- “Прочитайте цей перегляд повільно: домен — це « як виглядають дані », діапазон — це « на які пікселі вони перетворюються ». Поєднання цих параметрів — найпоширеніша помилка масштабування D3.” *
** Генератор осей ** — допоміжний інструмент D3 (d3.axisBottom тощо), який відображає позначки і мітки для заданого масштабу, замість того, щоб ви обчислювали позицію позначки вручну.
- “Ми не розташовуємо позначки тисків вручну — генератор осей отримує їх з того ж масштабу, що і стовпчики, тому вони не можуть бути не синхронізовані.” *
Transitions
** Перехід ** — анімована зміна атрибутів вибраного об’ єкта протягом вказаного часу, за допомогою власної інтерполяції D3, а не переходів CSS.
“Смужки ростуть на своєму місці за допомогою 400-мс переходу на атрибут
height— це тонко, але це робить оновлення відчувати навмисне, а не різке.”
** Interpolator ** — функція D3 використовується для обчислення проміжних значень між початковим і кінцевим станами під час переходу (числа, кольори, шляхи).
- “Кольори скачали замість змішування, оскільки ми інтерполювали шістнадцяткові рядки безпосередньо — переключення на
d3.interpolateRgbвиправило плавне зменшення.” *
Поширені помилки
- Сказати « діаграма не оновлюється » без розрізнення enter, update або exit — кожен з них має різні режими помилок і різні виправлення.
- Закодування значень пікселів замість виведення їх з масштабу — це порушує момент зміни діапазону набору даних.
- Забувати ключову функцію в динамічних даних, а потім звинувачувати “React” або “фреймворк” у мігніті, це насправді проблема з підбором ідентичності D3.
Практичні вправи
- Поясніть у двох реченнях різницю між фазами введення і оновлення вибору для розробника, який не знає D3.
- Напишіть короткий опис PR для додавання ключової функції, яка виправляє невідповідні переходи на впорядкованій стовпчиковій діаграмі.
- Створити коментар перегляду коду, у якому буде пояснено, чому позицію пікселів у коді слід замінити на масштаб.
Зв’язані ресурси
Розширення категорії: Поняття, що виходять за рамки категорії
Основний словник D3.js - вибір, з’єднання даних, масштабування, переходи - є ключовим для розуміння того, як ваші візуалізації будуються і обробляються. Однак, значна частина ефективного розробника не просто знає * що * ці речі роблять; це комунікація про них чітко і точно з вашою командою. Це місце, де професійна англійська мова стає життєво важливою, особливо для нерідних носіїв, які пересуваються нюансами технічних дискусій. Недостатньо просто перекласти терміни D3 безпосередньо - вам потрібно розуміти фрази, що використовуються при описі проблем, пропонуючи поліпшення, або співпрацюючи над дизайном.
Наприклад, уявіть, що ви отримали такий коментар під час перегляду коду: «Цей перехід відчувається трохи різким. Чи можемо ми розглянути використання transition з duration() для більш гладкого ефекту?» Негайний переклад «раптового» і «гладкого ефекту» може не повністю охопити бажаний результат. Природнішим формулюванням англійською мовою було б пояснити * чому * це відчувається раптово - можливо, зміна занадто швидка, або анімація не є візуально привабливою. Аналогічно, вказуючи duration() вводить ключовий елемент контролю і дозволяє конкретну дискусію про час. Це про передачу вашого спостереження і пропозицію рішення, а не просто заяву про технічну проблему. Іншим поширеним сценарієм є пояснення складного об’ єднання даних: « Ми використовуємо * внутрішнє об’ єднання *, щоб переконатися, що у візуалізації буде включено лише рядки з відповідними ідентифікаторами у обох наборах даних ». Сам термін « внутрішнє об’ єднання » може бути складним для деяких, але його формулювання як забезпечення * тільки * відповідних рядків підкреслює мету і уникнення плутанини.
Крім того, створення ефективних описів PR є критичним комунікаційним вмінням. Замість простого повідомлення « Впроваджено нову діаграму », ви можете написати: « Цей запит на завантаження вводить нову візуалізацію діаграми розсіювання за допомогою D3. js. Дані об’ єднуються на основі поля userId, а масштаби застосовуються для відображення числових значень на позиціях пікселів. Для анімації точок у вікні використовується лінійний перехід. » Це надає контекст, описує ключові технічні рішення і дозволяє рецензентам швидко зрозуміти вплив змін. Рівень деталізації повинен відповідати складності зміни, але завжди слід звертати увагу на ясність.
// Example: Using D3's `transition` function to smoothly update a circle's size
const svg = d3.select("svg");
const circle = svg.append("circle")
.attr("cx", 50)
.attr("cy", 50)
.attr("r", 20);
circle.transition()
.duration(1000)
.attr("r", 50); // Smoothly increase the radius over 1 secondНарешті, пам’ятайте, що активне слухання так само важливо, як і чітке спілкування. Зверніть увагу на те, як ваші колеги формулюють речі, і не бійтеся просити про пояснення, якщо щось не відразу очевидно. Створення спільного розуміння технічного словника - і, що ще важливіше, * як * ефективно обговорювати його - значно поліпшить співпрацю в межах вашої команди і допоможе успіху ваших проектів D3.js.