<section id="description">
<p>D3 имеет несколько методов, которые позволяют добавлять и изменять элементы в документе. Метод <code>select()</code> выбирает один элемент из документа. Он принимает аргумент для имени нужного элемента и возвращает узел HTML для первого элемента в документе, который соответствует имени. Вот пример: <code>const anchor = d3.select("a");</code> Приведенный выше пример находит первый якорный тег на странице и сохраняет узел HTML для него в переменном <code>anchor</code> . Вы можете использовать выделение с помощью других методов. Часть «d3» в примере является ссылкой на объект D3, так как вы получаете доступ к методам D3. Два других полезных метода: <code>append()</code> и <code>text()</code> . Метод <code>append()</code> принимает аргумент для элемента, который вы хотите добавить в документ. Он добавляет узел HTML к выбранному элементу и возвращает дескриптор этого узла. Метод <code>text()</code> либо задает текст выбранного узла, либо получает текущий текст. Чтобы установить значение, вы передаете строку в качестве аргумента внутри круглых скобок метода. Вот пример, который выбирает неупорядоченный список, добавляет элемент списка и добавляет текст: <blockquote> d3.select ( "UL") <br> .append ( "Ли") <br> .text («Очень важный элемент»); </blockquote> D3 позволяет объединять несколько методов вместе с периодами для выполнения ряда действий в строке.</p></section>

Add Document Elements with D3

<section id="description">
<p>D3 также имеет метод <code>selectAll()</code> для выбора группы элементов. Он возвращает массив узлов HTML для всех элементов документа, соответствующих строке ввода. Ниже приведен пример выбора всех якорных тегов в документе: <code>const anchors = d3.selectAll("a");</code> Как и метод <code>select()</code> , <code>selectAll()</code> поддерживает цепочку методов, и вы можете использовать ее другими способами.</p></section>

Select a Group of Elements with D3

<section id="description">
<p>Библиотека D3 фокусируется на подходе, основанном на данных. Когда у вас есть набор данных, вы можете применить методы D3, чтобы отобразить их на странице. Данные поступают во многих форматах, но этот вызов использует простой массив чисел. Первый шаг - сделать D3 осведомленным о данных. Метод <code>data()</code> используется для выбора элементов DOM для привязки данных к этим элементам. Набор данных передается в качестве аргумента методу. Общий шаблон рабочего процесса - создать новый элемент в документе для каждой части данных в наборе. Для этой цели D3 имеет метод <code>enter()</code> . Когда метод <code>enter()</code> комбинируется с методом <code>data()</code> , он просматривает выбранные элементы со страницы и сравнивает их с количеством элементов данных в наборе. Если элементов меньше, чем элементов данных, это создает недостающие элементы. Вот пример, который выбирает элемент <code>ul</code> и создает новый элемент списка в зависимости от количества записей в массиве: <blockquote> &#x3C;Тело> <br> &#x3C;UL> &#x3C;/ UL> <br> &#x3C;Скрипт> <br> const dataset = ["a", "b", "c"]; <br> d3.select ( "UL"). SelectAll ( "Ли") <br> .data (набор данных) <br> .войти() <br> .append ( "Ли") <br> .text («Новый элемент»); <br> &#x3C;/ Скрипт> <br> &#x3C;/ Body> </blockquote> Может показаться странным выбирать элементы, которые еще не существуют. Этот код сообщает D3, чтобы сначала выбрать <code>ul</code> на странице. Затем выберите все элементы списка, которые возвращают пустой выбор. Затем метод <code>data()</code> проверяет набор данных и запускает следующий код три раза, один раз для каждого элемента массива. Метод <code>enter()</code> видит, что на странице нет элементов <code>li</code> , но для этого требуется 3 (по одному для каждой части данных в <code>dataset</code> ). Новые элементы <code>li</code> добавляются в <code>ul</code> и имеют текст «Новый элемент».</p></section>

Work with Data in D3

<section id="description">
<p>Последние две проблемы охватывают основы динамического отображения данных с помощью D3 с использованием методов <code>data()</code> и <code>enter()</code> . Эти методы берут набор данных и вместе с методом <code>append()</code> создают новый элемент DOM для каждой записи в наборе данных. В предыдущей задаче вы создали новый элемент <code>h2</code> для каждого элемента массива <code>dataset</code> , но все они содержали один и тот же текст «Новое название». Это связано с тем, что вы не использовали данные, привязанные к каждому из элементов <code>h2</code> . Метод D3 <code>text()</code> может принимать строку или функцию обратного вызова в качестве аргумента: <code>selection.text((d) => d)</code> В приведенном выше примере параметр <code>d</code> ссылается на одну запись в наборе данных, которая связана с выбором к. Используя текущий пример как контекст, первый элемент <code>h2</code> привязан к 12, второй элемент <code>h2</code> привязан к 31, третий элемент <code>h2</code> привязан к 22 и так далее.</p></section>

Work with Dynamic Data in D3

<section id="description">
<p>D3 позволяет добавлять встроенные стили CSS для динамических элементов с помощью метода <code>style()</code> . Метод <code>style()</code> принимает в качестве аргумента пару ключ-значение, разделенную запятыми. Вот пример, чтобы задать цвет текста выбора синим: <code>selection.style("color","blue");</code></p>
</section>

Add Inline Styling to Elements

<section id="description">
<p>D3 - о визуализации и представлении данных. Вероятно, вы захотите изменить стиль элементов на основе данных. Вы можете использовать функцию обратного вызова в методе <code>style()</code> для изменения стиля для разных элементов. Например, вы можете покрасить синюю точку данных, если она имеет значение менее 20, и наоборот. Вы можете использовать функцию обратного вызова в методе <code>style()</code> и включать условную логику. Функция обратного вызова использует параметр <code>d</code> для представления точки данных: <blockquote> selection.style ("color", (d) => { <br> / * Логика, возвращающая цвет, основанный на условии * / <br> }); </blockquote> Метод <code>style()</code> не ограничивается настройкой <code>color</code> - его можно использовать и с другими свойствами CSS.</p></section>

Change Styles Based on Data

<section id="description">
<p>Использование большого количества встроенных стилей в HTML-элементах трудно справиться даже для небольших приложений. Легче добавить класс к элементам и стиль этого класса один раз с использованием правил CSS. D3 имеет метод <code>attr()</code> для добавления любого элемента HTML к элементу, включая имя класса. Метод <code>attr()</code> работает так же, как это делает <code>style()</code> . Он принимает значения, разделенные запятыми, и может использовать функцию обратного вызова. Вот пример добавления класса «container» к выбору: <code>selection.attr("class", "container");</code></p>
</section>

Add Classes with D3

<section id="description">
<p>Предыдущие проблемы касались того, как отображать данные из массива и как добавлять классы CSS. Вы можете объединить эти уроки, чтобы создать простую гистограмму. Для этого есть два шага: 1) Создайте <code>div</code> для каждой точки данных в массиве. 2) Дайте каждому <code>div</code> динамическую высоту, используя функцию обратного вызова в методе <code>style()</code> которая устанавливает высоту, равную значению данных. Назовите формат задайте стиль с помощью функции обратного вызова: <code>selection.style("cssProperty", (d) => d)</code></p>
</section>

Update the Height of an Element Dynamically

<section id="description">
<p>Последняя задача создала гистограмму, но есть несколько изменений форматирования, которые могли бы ее улучшить: 1) добавьте пробел между каждым столбцом, чтобы визуально отделить их, что делается путем добавления поля к CSS для класса <code>bar</code> 2) Увеличить высота баров, чтобы лучше показать разницу в значениях, что делается путем умножения значения на число для масштабирования высоты</p></section>

Change the Presentation of a Bar Chart

<section id="description">
<p>SVG означает <code>Scalable Vector Graphics</code> . Здесь «масштабируемый» означает, что если вы увеличиваете или уменьшаете масштаб объекта, он не будет отображаться в пикселях. Он масштабируется с помощью системы отображения, будь то на маленьком мобильном экране или большом ТВ-мониторе. SVG используется для создания общих геометрических фигур. Поскольку D3 отображает данные в визуальное представление, он использует SVG для создания фигур для визуализации. Формы SVG для веб-страницы должны <code>svg</code> теге HTML <code>svg</code> . CSS может быть масштабируемым, когда стили используют относительные единицы (например, <code>vh</code> , <code>vw</code> или проценты), но использование SVG более гибко для создания визуализации данных.</p></section>

Learn About SVG in D3

<section id="description">
<p>The last challenge created an <code>svg</code> element with a given width and height, which was visible because it had a <code>background-color</code> applied to it in the <code>style</code> tag. The code made space for the given width and height.</p>
<p>The next step is to create a shape to put in the <code>svg</code> area. There are a number of supported shapes in SVG, such as rectangles and circles. They are used to display data. For example, a rectangle (<code>&#x3C;rect></code>) SVG shape could create a bar in a bar chart.</p>
<p>When you place a shape into the <code>svg</code> area, you can specify where it goes with <code>x</code> and <code>y</code> coordinates. The origin point of (0, 0) is in the upper-left corner. Positive values for <code>x</code> push the shape to the right, and positive values for <code>y</code> push the shape down from the origin point.</p>
<p>To place a shape in the middle of the 500 (width) x 100 (height) <code>svg</code> from last challenge, the <code>x</code> coordinate would be 250 and the <code>y</code> coordinate would be 50.</p>
<p>An SVG <code>rect</code> has four attributes. There are the <code>x</code> and <code>y</code> coordinates for where it is placed in the <code>svg</code> area. It also has a <code>height</code> and <code>width</code> to specify the size.</p></section>

Display Shapes with SVG

<section id="description">
<p>Последняя задача добавила только один прямоугольник в элемент <code>svg</code> для представления строки. Здесь вы объедините все, что вы узнали до сих пор, о формах <code>data()</code> , <code>enter()</code> и SVG для создания и добавления прямоугольника для каждой точки <code>dataset</code> в <code>dataset</code> . Предыдущий вызов показал формат создания и добавления <code>div</code> для каждого элемента в <code>dataset</code> : <blockquote> d3.select ( "тело"). SelectAll ( "DIV") <br> .data (набор данных) <br> .войти() <br> .append ( "DIV") </blockquote> Есть несколько отличий, которые работают с <code>rect</code> элементами вместо <code>divs</code> . <code>rects</code> должны быть добавлены к элементу <code>svg</code> , а не непосредственно к <code>body</code> . Кроме того, вам нужно указать D3, где разместить каждый <code>rect</code> в области <code>svg</code> . Размещение бар будет рассмотрено в следующей задаче.</p></section>

Create a Bar for Each Data Point in the Set

<section id="description">
<p>Последняя задача создала и добавила прямоугольник к элементу <code>svg</code> для каждой точки в <code>dataset</code> для представления строки. К сожалению, все они были сложены друг на друга. Размещение прямоугольника обрабатывается атрибутами <code>x</code> и <code>y</code> . Они сообщают D3, где начать рисовать фигуру в области <code>svg</code> . Последний вызов задал каждому из них значение 0, поэтому каждый бар был помещен в верхний левый угол. Для гистограммы все бары должны находиться на одном и том же вертикальном уровне, что означает, что значение <code>y</code> остается неизменным (в 0) для всех баров. Однако значение <code>x</code> должно изменяться при добавлении новых баров. Помните, что большие значения <code>x</code> перемещают элементы дальше вправо. По мере прохождения элементов массива в <code>dataset</code> значение x должно увеличиваться. Метод <code>attr()</code> в D3 принимает функцию обратного вызова, чтобы динамически установить этот атрибут. Функция обратного вызова принимает два аргумента: один для самой точки данных (обычно <code>d</code> ) и один для индекса точки данных в массиве. Второй аргумент для индекса является необязательным. Вот формат: <blockquote> selection.attr ("свойство", (d, i) => { <br> / * <br> * d - значение точки данных <br> * i - индекс точки данных в массиве <br> * / <br> }) </blockquote> Важно отметить, что вам не нужно писать цикл <code>for</code> или использовать <code>forEach()</code> для перебора элементов в наборе данных. Напомним, что метод <code>data()</code> анализирует набор данных, и любой метод, который привязан после того, как <code>data()</code> запускается один раз для каждого элемента в наборе данных.</p></section>

Dynamically Set the Coordinates for Each Bar

<section id="description">
<p>Высота каждой панели может быть установлена ​​на значение точки данных в массиве, подобно тому, как значение <code>x</code> было задано динамически. <blockquote> selection.attr ("свойство", (d, i) => { <br> / * <br> * d - значение точки данных <br> * i - индекс точки данных в массиве <br> * / <br> }) </blockquote></p>
</section>

Dynamically Change the Height of Each Bar

<section id="description">
<p>Возможно, вы заметили, что гистограмма выглядела как перевернутая или перевернутая. Это связано с тем, как SVG использует (x, y) координаты. В SVG начальная точка для координат находится в верхнем левом углу. Координата <code>x</code> из 0 помещает фигуру на левый край области SVG. Координата <code>y</code> из 0 устанавливает форму на верхнем краю области SVG. Более высокие значения <code>x</code> нажимают прямоугольник вправо. Более высокие значения <code>y</code> выталкивают прямоугольник вниз. Чтобы сделать панели правыми, вам нужно изменить способ вычисления <code>y</code> координаты. Он должен учитывать как высоту бара, так и общую высоту области SVG. Высота области SVG равна 100. Если у вас есть точка данных из 0 в наборе, вы хотите, чтобы панель начиналась в нижней части области SVG (а не сверху). Для этого координата <code>y</code> должна иметь значение 100. Если значение точки данных равно 1, вы должны начать с координаты <code>y</code> из 100, чтобы установить планку внизу. Затем вам нужно учитывать высоту полосы 1, поэтому конечная координата <code>y</code> будет равна 99. Координата <code>y</code> которая равна <code>y = heightOfSVG - heightOfBar</code> , поместит бары вправо-вверх.</p></section>

Invert SVG Elements

<section id="description">
<p>Бары находятся в правильном положении, но все они имеют черный цвет. SVG имеет способ изменить цвет баров. В SVG <code>rect</code> форма окрашена с атрибутом <code>fill</code> . Он поддерживает шестнадцатеричные коды, имена цветов и значения rgb, а также более сложные параметры, такие как градиенты и прозрачность.</p></section>

Change the Color of an SVG Element

<section id="description">
<p>D3 позволяет вам наметить элемент графа, например панель, используя <code>text</code> элемент SVG. Подобно элементу <code>rect</code> , <code>text</code> элемент должен иметь атрибуты <code>x</code> и <code>y</code> , чтобы поместить его на холст SVG. Он также должен получить доступ к данным для отображения этих значений. D3 дает вам высокий уровень контроля над тем, как вы назовете свои бары.</p></section>

Add Labels to D3 Elements

<section id="description">
<p>Методы D3 могут добавлять стили к ярлыкам бара. Атрибут <code>fill</code> устанавливает цвет текста для <code>text</code> узла. Метод <code>style()</code> устанавливает правила CSS для других стилей, таких как «font-family» или «font-size».</p></section>

Style D3 Labels

<section id="description">
<p>Можно добавлять эффекты, выделяющие панель, когда пользователь наводил на нее курсор мыши. Пока что стиль для прямоугольников применяется со встроенными методами D3 и SVG, но вы также можете использовать CSS. Вы устанавливаете класс CSS в элементах SVG с помощью метода <code>attr()</code> . Затем псевдокласс класса <code>:hover</code> для вашего нового класса содержит правила стиля для любых эффектов зависания.</p></section>

Add a Hover Effect to a D3 Element

<section id="description">
<p>Всплывающая подсказка показывает дополнительную информацию об элементе на странице, когда пользователь наводит курсор на этот элемент. Существует несколько способов добавления всплывающей подсказки к визуализации, эта задача использует элемент <code>title</code> SVG. <code>title</code> с методом <code>text()</code> для динамического добавления данных в столбцы.</p></section>

Add a Tooltip to a D3 Element

<section id="description">
<p>График рассеяния - это еще один вид визуализации. Он обычно использует круги для сопоставления точек данных, каждая из которых имеет по два значения. Эти значения привязываются к осям <code>x</code> и <code>y</code> и используются для позиционирования круга при визуализации. SVG имеет <code>circle</code> тег для создания формы круга. Он очень похож на элементы <code>rect</code> которые вы использовали для гистограммы.</p></section>

Create a Scatterplot with SVG Circles

<section id="description">
<p>Последняя задача создала элементы <code>circle</code> для каждой точки <code>dataset</code> и добавила их в холст SVG. Но D3 нуждается в дополнительной информации о положении и размере каждого <code>circle</code> чтобы отображать их правильно. <code>circle</code> в SVG имеет три основных атрибута. Атрибуты <code>cx</code> и <code>cy</code> - это координаты. Они сообщают D3, где можно расположить <em>центр</em> фигуры на холсте SVG. Радиус (атрибут <code>r</code> ) задает размер <code>circle</code> . Как и <code>rect</code> координата <code>y</code> , атрибут <code>cy</code> для <code>circle</code> измеряется от вершины холста SVG, а не снизу. Все три атрибута могут использовать функцию обратного вызова для динамического определения их значений. Помните, что все методы, закодированные после того, как <code>data(dataset)</code> запускаются один раз для каждого элемента в <code>dataset</code> . Параметр <code>d</code> в функции обратного вызова относится к текущему элементу в <code>dataset</code> , который является массивом для каждой точки. Для доступа к значениям в этом массиве вы используете запись в виде скобок, например <code>d[0]</code> .</p></section>

Add Attributes to the Circle Elements

<section id="description">
<p>You can add text to create labels for the points in a scatter plot.</p>
<p>The goal is to display the comma-separated values for the first (<code>x</code>) and second (<code>y</code>) fields of each item in <code>dataset</code>.</p>
<p>The <code>text</code> nodes need <code>x</code> and <code>y</code> attributes to position it on the SVG canvas. In this challenge, the <code>y</code> value (which determines height) can use the same value that the <code>circle</code> uses for its <code>cy</code> attribute. The <code>x</code> value can be slightly larger than the <code>cx</code> value of the <code>circle</code>, so the label is visible. This will push the label to the right of the plotted point.</p></section>

Add Labels to Scatter Plot Circles

<section id="description">
<p>Графики штрихов и диаграмм рассеяния отображают данные непосредственно на холст SVG. Однако, если высота бара или одной из точек данных больше, чем значения высоты или ширины SVG, она выходит за пределы области SVG. В D3 существуют шкалы, которые помогают отображать данные. <code>Scales</code> - это функции, которые сообщают программе, как сопоставить набор необработанных точек данных на пикселях холста SVG. Например, скажем, у вас есть холст SVG размером 100 × 500 и вы хотите построить валовой внутренний продукт (ВВП) для ряда стран. Набор чисел будет в диапазоне миллиардов или триллионов долларов. Вы предоставляете D3 тип шкалы, чтобы рассказать о том, как разместить большие значения ВВП в этой области размером 100x500. Маловероятно, что вы будете строить необработанные данные как есть. Перед построением графика вы установите масштаб для всего набора данных, чтобы значения <code>x</code> и <code>y</code> соответствовали ширине и высоте холста. D3 имеет несколько типов шкалы. Для линейного масштаба (обычно используется с количественными данными) существует метод D3 <code>scaleLinear()</code> : <code>const scale = d3.scaleLinear()</code> По умолчанию масштаб использует отношение идентичности. Значение входа совпадает с значением выхода. Отдельная проблема охватывает то, как это изменить.</p></section>

Create a Linear Scale with D3

<section id="description">
<p>По умолчанию шкалы используют отношение идентичности - входное значение сопоставляется с выходным значением. Но масштабы могут быть гораздо более гибкими и интересными. Скажем, набор данных имеет значения от 50 до 480. Это входная информация для шкалы и также известна как домен. Вы хотите сопоставить эти точки вдоль оси <code>x</code> на холсте SVG, между 10 единицами и 500 единицами. Это выходная информация, которая также известна как диапазон. Методы <code>domain()</code> и <code>range()</code> задают эти значения для шкалы. Оба метода принимают в качестве аргумента массив из по меньшей мере двух элементов. Вот пример: <blockquote> // Установить домен <br> // Область охватывает набор входных значений <br> scale.domain ([50, 480]); <br> // Установить диапазон <br> // Диапазон охватывает набор выходных значений <br> scale.range ([10, 500]); <br> масштаб (50) // Возвращает 10 <br> масштаб (480) // Возвращает 500 <br> масштаб (325) // Возвращает 323.37 <br> масштаб (750) // Возвращает 807.67 <br> d3.scaleLinear () </blockquote> Обратите внимание, что шкала использует линейную зависимость между областью и значениями диапазона, чтобы выяснить, какой результат должен быть для данного номера. Минимальное значение в области (50) соответствует минимальному значению (10) в диапазоне.</p></section>

Set a Domain and a Range on a Scale

<section id="description">
<p>D3 method <code>domain()</code> и <code>range()</code> устанавливают эту информацию для вашего масштаба на основе данных. Есть несколько способов сделать это проще. Часто, когда вы устанавливаете домен, вы хотите использовать минимальное и максимальное значения в наборе данных. Попытка найти эти значения вручную, особенно в большом наборе данных, может привести к ошибкам. D3 имеет два метода - <code>min()</code> и <code>max()</code> чтобы вернуть эту информацию. Вот пример: <blockquote> const exampleData = [34, 234, 73, 90, 6, 52]; <br> d3.min (exampleData) // Возвращает 6 <br> d3.max (exampleData) // Возвращает 234 </blockquote> Набор данных может иметь вложенные массивы, такие как пары координат [x, y], которые были в примере графика рассеяния. В этом случае вам нужно рассказать D3, как рассчитать максимум и минимум. К счастью, методы <code>min()</code> и <code>max()</code> принимают функцию обратного вызова. В этом примере аргумент функции обратного вызова <code>d</code> для текущего внутреннего массива. Обратный вызов должен возвращать элемент из внутреннего массива (значение x или y), по которому вы хотите вычислить максимальное или минимальное значение. Ниже приведен пример того, как найти значения min и max с массивом массивов: <blockquote> const locationData = [[1, 7], [6, 3], [8, 3]]; <br> // Возвращает наименьшее число из первых элементов <br> const minX = d3.min (locationData, (d) => d [0]); <br> // minX сравнивается с 1, 6 и 8 и устанавливается в 1 </blockquote></p>
</section>

Use the d3.max and d3.min Functions to Find Minimum and Maximum Values in a Dataset

<section id="description">
<p>Методы D3 <code>min()</code> и <code>max()</code> полезны, чтобы помочь установить масштаб. Учитывая сложный набор данных, одним из приоритетов является установка масштаба, чтобы визуализация соответствовала ширине и высоте контейнера SVG. Вы хотите, чтобы все данные отображались внутри холста SVG, чтобы они были видны на веб-странице. В приведенном ниже примере задана шкала по оси X для данных графика разброса. Метод <code>domain()</code> передает информацию в шкалу о значениях необработанных данных для графика. Метод <code>range()</code> дает ему информацию о фактическом пространстве на веб-странице для визуализации. В этом примере домен переходит от 0 к максимуму в наборе. Он использует метод <code>max()</code> с функцией обратного вызова, основанной на значениях x в массивах. Диапазон использует ширину холста SVG ( <code>w</code> ), но также включает в себя некоторые дополнения. Это помещает пространство между точками графика рассеяния и краем холста SVG. <blockquote> const dataset = [ <br> [34, 78], <br> [109, 280], <br> [310, 120], <br> [79, 411], <br> [420, 220], <br> [233, 145], <br> [333, 96], <br> [222, 333], <br> [78, 320], <br> [21, 123] <br> ]; <br> const w = 500; <br> const h = 500; <br><br> // Заполнение между границей холста SVG и графиком <br> const padding = 30; <br> const xScale = d3.scaleLinear () <br> .domain ([0, d3.max (набор данных, (d) => d [0])]) <br> .range ([padding, w - padding]); </blockquote> Сначала заполнение может сбивать с толку. Отобразите ось x как горизонтальную линию от 0 до 500 (значение ширины для холста SVG). Включение дополнения в метод <code>range()</code> заставляет график начинаться с 30 по этой линии (вместо 0) и заканчиваться на 470 (вместо 500).</p></section>

Use Dynamic Scales

<section id="description">
<p>С установленными весами пришло время снова отобразить график рассеяния. Масштабы похожи на функции обработки, которые превращают исходные данные x и y в значения, которые соответствуют и визуализируются правильно на холсте SVG. Они хранят данные в области построения экрана. Вы устанавливаете значения атрибута координат для формы SVG с помощью функции масштабирования. Сюда входят атрибуты <code>x</code> и <code>y</code> для <code>rect</code> или <code>text</code> элементов, или <code>cx</code> и <code>cy</code> для <code>circles</code> . Вот пример: <blockquote> форма <br> .attr ("x", (d) => xScale (d [0])) </blockquote> Масштабы устанавливают атрибуты координат формы, чтобы поместить точки данных на холст SVG. Вам не нужно применять шкалы, когда вы показываете фактическое значение данных, например, в методе <code>text()</code> для всплывающей подсказки или метки.</p></section>

Use a Pre-Defined Scale to Place Elements

<section id="description">
<p>Другой способ улучшить график рассеяния - добавить ось x и ось y. D3 имеет два метода <code>axisLeft()</code> и <code>axisBottom()</code> для визуализации осей y и x соответственно. (Оси - это множественная форма оси). Ниже приведен пример создания оси x на основе <code>xScale</code> в предыдущих задачах: <code>const xAxis = d3.axisBottom(xScale);</code> Следующий шаг - отобразить ось на холсте SVG. Для этого вы можете использовать общий компонент SVG, элемент <code>g</code> . Группа <code>g</code> обозначает группу. В отличие от <code>rect</code> , <code>circle</code> и <code>text</code> , ось является прямой линией, когда она отображается. Потому что это простая форма, используя <code>g</code> works. Последний шаг - применить атрибут <code>transform</code> для размещения оси на холсте SVG в нужном месте. В противном случае линия будет отображаться вдоль границы холста SVG и не будет видна. SVG поддерживает различные типы <code>transforms</code> , но позиционирование оси требует <code>translate</code> . Когда он применяется к элементу <code>g</code> , он перемещает всю группу за и на указанные суммы. Вот пример: <blockquote> const xAxis = d3.axisBottom (xScale); <br><br> svg.append ( "г") <br> .attr ("transform", "translate (0," + (h - padding) + ")") <br> .call (Xaxis); </blockquote> Вышеупомянутый код помещает ось x в нижнюю часть холста SVG. Затем он передается в качестве аргумента методу <code>call()</code> . Ось y работает одинаково, за исключением того, что аргумент <code>translate</code> имеет вид (x, 0). Поскольку <code>translate</code> является строкой в ​​методе <code>attr()</code> выше, вы можете использовать конкатенацию для включения значений переменных для своих аргументов.</p></section>