оригинал:medium.com/@en JA много/дней спустя…
Переведенный адрес исходного кода:3 на GitHub.com/SST house/…
Если эта статья была вам полезна, ставьте лайк :tada:
адрес гитхаба:3 на GitHub.com/SST house/…
Пейзаж на пути к изучению D3.js прекрасен, великолепен и местами труден.Вас может напугать длинный список функций в документации к d3.js (документация API d3), или измученный грудами туториалов (dozens of tutorials) Вот более 20 000 примеров, которые вы можете использовать для изучения:20,000+ d3 examples, но вы не знаете, какие из них действительно помогут вам изучить D3.js.
Если вы просто хотите быстро получить гистограмму или диаграмму, то эта статья может быть не для вас, есть много библиотек, которые могут вам в этом помочь:plenty of charting libraries, Если вы больше склонны учиться, читая, эта книга может стать для вас хорошей отправной точкой.Interactive Data Visualization for the Web. Elijah MeeksизD3.js in ActionМожет помочь вам лучше понять API D3.
Цель этой статьи — мысленно подготовить вас к изучению D3 и предоставить некоторые направления для дальнейшего обучения.Помимо изучения собственного API D3, о веб-стандартах HTML, SVG, CSS, Javascript и концепциях визуализации данных, стандарты все, чему нужно учиться. Скорее всего, вы уже знаете некоторые из вышеперечисленных, и эта статья призвана дать вам хорошую отправную точку для продолжения учебы.
Прежде чем мы перейдем к визуализации данных и навыкам кодирования, давайте взглянем на некоторые вещи, которые вдохновляют нас учиться.Существует так много удивительных примеров, так что ознакомьтесь с ними и настройтесь на изучение Target:New York Times article, r2d3, distill.pub, datasketch|es, polygraph, ncase.
Не просто смотрите на это, вы можете ставить перед собой более крупные цели.Из этой статьи я узнал, что лучший способ научиться — это поставить перед собой задачу, которую вы хотите выполнить, и ломать голову, чтобы выполнить ее:interviewing some of the top data visualization practitioners using d3.js .
Графическое представление
D3 не вводит новую форму визуального представления.Processing, Raphaël, илиProtovisСловарь графики D3 получен непосредственно из веб-стандартов: HTML, SVG и CSS. —d3js.org
Диаграммы — это просто прямоугольники с некоторыми фигурами внутри. D3 предоставляет вам способ выразить данные, которые вы хотите отобразить, манипулируя значками или графикой, которые вы определяете сами. Это позволяет вам легко добавлять визуализацию к вашей графике. Взаимодействие, которое определяет, как ведет себя ваш график. То, что вы узнаете в D3, будет визуальным представлением, которого вы не получите в других библиотеках.
Если вы хотите понять принципы использования различных типов знаков и символов, которым должны следовать люди, вы можете обратиться к этой книге:Grammar of Graphics.
Но не волнуйтесь, просто используя круги и прямоугольники, вы уже можете написать бесчисленное количество творческих работ.Начните с чего-то простого, сначала покажите что-то на экране, а затем медленно оптимизируйте это.
в веб-презентации
Одна из причин, по которой мы выбрали D3, заключается в следующем: вы можете легко поделиться своей работой с кем угодно с помощью браузера. Это означает, что вам необходимо базовое понимание HTML5. Прежде чем вы начнете изучать API D3, вы уже должны иметь базовые знания SVG, HMTL и CSS.Если у вас есть время, вам лучше прочитать эту статью на Canvas (если у вас очень большой объем данных для отображения)learn some CanvasЯ рекомендую вам также прочитать это, это поможет вам очень хорошо использовать Canvas с D3.this is a great intermediate tutorial.
Для SVG я рекомендую взглянуть на это короткое и интересное введениеSVG primerотScott Murray, использовать инструменты:BlockBuilderчтобы быстро приступить к написанию кода, не тратя время на настройку среды разработки. Вы также можете ознакомиться с официальной документацией MDN по SVG.MDN reference site for SVG, После того, как вы освоите основы SVG, вы можете снова прочитать эту статью, которая может дать вам более глубокое понимание SVG.SVG beyond mere shapesотNadieh Bremer.
На самом деле вы можете даже отображать графику без использования SVG, а иногда напрямую использоватьdivдостаточно, чтобы получить желаемый эффект. Конечно, это требует от васCSSИметь хорошее представление о:CSS positioning, Чтобы добиться желаемого эффекта, вы можете дажеСмешайте HTML, SVG, Canvas!
Начало работы с d3.js
Возможно, вы видели документацию API D3, показывающую стеки функций:API d3, К счастью, теперь D3 разбит на модули один за другим, поэтому мы выберем для ознакомления некоторые из наиболее часто используемых.
d3-scale
Scales — очень простой инструмент в D3, вы можете получить общее представление о нем здесь:Introducing d3-scaleОт автора D3 Майка Бостока: Независимо от того, какой тип визуализации данных вы используете, скорее всего, вы будете использовать одну или несколько шкал.
d3-shape
Пути SVG очень подробные (see this thorough overview), такd3-shapeПредоставляет несколько методов, которые позволяют нам очень легко создавать пути SVG и управлять ими.Introducing d3-shapeЧтобы понять его роль и начать его использовать, D3-форма также может помочь вам нарисовать различную графику на холсте, вы просто добавите строку кода, чтобы путь SVG был добавлен на холст!
d3-selection
Вероятно, самой сложной частью D3 для понимания является его выбор.Также ознакомьтесь со статьей автора D3, чтобы лучше понять модель выбора D3:General Update Pattern. Мне потребовались месяцы, чтобы забить таблицу головой, чтобы наконец понять модель выбора, но не бойтесь! Вам не нужно полностью разбираться во всех API выбора, чтобы выполнить работу D3. Когда вы это сделаете Чтобы подготовиться к изучения, вы можете начать с этой статьи:d3-selectionsREADME. Также обязательно ознакомьтесь с этой статьей, которая очень полезна для понимания модели выбора.Thinking in Joins.
d3-collection
Манипулирующие данные - очень важный шаг в визуализации данных. Иногда это даже самая сложная часть (если ваш набор данных не идеален, или у вас нет хорошего понимания). Хотя есть много вещей, которые могут помочь с данными Инструмент манипуляции, здесь я все еще рекомендую взглянуть на коллекцию D3d3-collection, в частности этот модуль:nest function.
d3-hierarchy
Тогда выше для数据操作Во многих визуализациях данных очень важно отображать их в соответствии со структурой данных.Здесь вы можете найти множество инструментов, Функция, которые могут помочь вам легко выполнить такую обработку данных:d3-hierarchyПостройте древовидные данные.
d3-zoom
Масштабирование — очень распространенный способ визуализации данных, — говорит автор D3 Майк.ряд примеровПоказывает, как увеличить визуализацию данных.d3-zoom, Вы также можете посмотреть и缩放очень похожая операция拖拽 d3-drag
d3-force
Одной из действительно удивительных особенностей D3 является то, чтоd3 force layout, Он очень прост в использовании, но его трудно освоить. Для получения дополнительной информации см.:d3-force.
поиск!
И последний совет: вы можете искать варианты использования для любой функции API по этому URL-адресу:Поиск BlockBuilder.Вы даже можете ограничить свой поиск ограниченной версией d3!
Сообщество D3
Общайтесь с единомышленниками! Вы можете присоединиться к нашему slack-каналу:d3.js slack channel, Или найдите ближайшее офлайн-мероприятие D3:woohoo.meet up.com/topics/ 3-просто…Если вы очень фанатично о D3, приходите на ежегодную падение SF!annual d3.unconf!
большое спасибоErik HazzardПомогите мне отредактировать и отполировать этот пост. Спасибо.Kai ChangСпасибо за вашу помощь сообществу d3.Благодарим слабый канал #teaching-d3 вd3js Slack, особенноSebastianа такжеJohnотзыв.Конечно,большая благодарность автору D3Mike BostockСоздал игровую площадку для всех нас, чтобы играть!
Хотите узнать больше о D3.js?
вот мойD3.js,визуализация данныхадрес github, добро пожаловать на старт и форк :tada: