D3.js предоставляет функции масштабирования для преобразования данных. Эти функции отображают входной домен в выходной диапазон.
Конфигурирование API
Мы можем настроить API напрямую, используя следующий скрипт.
<script src = "https://d3js.org/d3-array.v1.min.js"></script> <script src = "https://d3js.org/d3-collection.v1.min.js"></script> <script src = "https://d3js.org/d3-color.v1.min.js"></script> <script src = "https://d3js.org/d3-format.v1.min.js"></script> <script src = "https://d3js.org/d3-interpolate.v1.min.js"></script> <script src = "https://d3js.org/d3-time.v1.min.js"></script> <script src = "https://d3js.org/d3-time-format.v2.min.js"></script> <script src = "https://d3js.org/d3-scale.v1.min.js"></script> <script> </script>
Scales API Методы
D3 предоставляет следующие важные методы масштабирования для различных типов диаграмм. Давайте разберемся тогда в деталях.
-
d3.scaleLinear () — создает непрерывный линейный масштаб, в который мы можем вводить карты данных (доменов) в указанный выходной диапазон.
-
d3.scaleIdentity () — построить линейный масштаб, где входные данные совпадают с выходными.
-
d3.scaleTime () — Построить линейный масштаб, где входные данные представлены в датах, а выходные — в числах.
-
d3.scaleLog () — Построить логарифмический масштаб.
-
d3.scaleSqrt () — построение квадратно-корневого масштаба.
-
d3.scalePow () — Построить экспоненциальный масштаб.
-
d3.scaleSequential () — Построить последовательную шкалу, где выходной диапазон фиксируется функцией интерполяции.
-
d3.scaleQuantize () — построить масштаб квантования с дискретным выходным диапазоном.
-
d3.scaleQuantile () — Создает квантильную шкалу, в которой входные данные выборки отображаются в дискретный выходной диапазон.
-
d3.scaleThreshold () — Построить масштаб, в котором произвольные входные данные отображаются в дискретный выходной диапазон.
-
d3.scaleBand () — Масштабные полосы подобны порядковым шкалам, за исключением того, что выходной диапазон является непрерывным и числовым.
-
d3.scalePoint () — построить точечную шкалу.
-
d3.scaleOrdinal () — Построить порядковый масштаб, где входные данные включают в себя алфавиты и отображаются в дискретный числовой диапазон вывода.
d3.scaleLinear () — создает непрерывный линейный масштаб, в который мы можем вводить карты данных (доменов) в указанный выходной диапазон.
d3.scaleIdentity () — построить линейный масштаб, где входные данные совпадают с выходными.
d3.scaleTime () — Построить линейный масштаб, где входные данные представлены в датах, а выходные — в числах.
d3.scaleLog () — Построить логарифмический масштаб.
d3.scaleSqrt () — построение квадратно-корневого масштаба.
d3.scalePow () — Построить экспоненциальный масштаб.
d3.scaleSequential () — Построить последовательную шкалу, где выходной диапазон фиксируется функцией интерполяции.
d3.scaleQuantize () — построить масштаб квантования с дискретным выходным диапазоном.
d3.scaleQuantile () — Создает квантильную шкалу, в которой входные данные выборки отображаются в дискретный выходной диапазон.
d3.scaleThreshold () — Построить масштаб, в котором произвольные входные данные отображаются в дискретный выходной диапазон.
d3.scaleBand () — Масштабные полосы подобны порядковым шкалам, за исключением того, что выходной диапазон является непрерывным и числовым.
d3.scalePoint () — построить точечную шкалу.
d3.scaleOrdinal () — Построить порядковый масштаб, где входные данные включают в себя алфавиты и отображаются в дискретный числовой диапазон вывода.
Прежде чем приступить к рабочему примеру, давайте сначала разберемся в следующих двух терминах:
-
Домен — Домен обозначает минимальные и максимальные значения ваших входных данных.
-
Range — Range — это выходной диапазон, который мы бы хотели, чтобы входные значения отображались на …
Домен — Домен обозначает минимальные и максимальные значения ваших входных данных.
Range — Range — это выходной диапазон, который мы бы хотели, чтобы входные значения отображались на …
Рабочий пример
Давайте выполним функцию d3.scaleLinear в этом примере. Для этого вам необходимо придерживаться следующих шагов —
Шаг 1 — Определите переменные — Определите переменные SVG и данные, используя приведенную ниже кодировку.
var data = [100, 200, 300, 400, 800, 0] var width = 500, barHeight = 20, margin = 1;
Шаг 2. Создание линейного масштаба. Используйте следующий код для создания линейного масштаба.
var scale = d3.scaleLinear() .domain([d3.min(data), d3.max(data)]) .range([100, 400]);
Здесь для минимального и максимального значения для нашего домена вручную мы можем использовать встроенные функции d3.min () и d3.max () , которые будут возвращать минимальное и максимальное значения соответственно из нашего массива данных.
Шаг 3. Добавление атрибутов SVG. Добавление элементов SVG с использованием приведенного ниже кода.
var svg = d3.select("body") .append("svg") .attr("width", width) .attr("height", barHeight * data.length);
Шаг 4 — Применить преобразование — Примените преобразование, используя код ниже.
var g = svg.selectAll("g") .data(data).enter().append("g") .attr("transform", function (d, i) { return "translate(0," + i * barHeight + ")"; });
Шаг 5. Добавление прямоугольных элементов. Добавление прямоугольных элементов к масштабированию, как показано ниже.
g.append("rect") .attr("width", function (d) { return scale(d); }) .attr("height", barHeight - margin)
Шаг 6 — Отображение данных. Теперь отобразите данные, используя приведенную ниже кодировку.
g.append("text") .attr("x", function (d) { return (scale(d)); }) .attr("y", barHeight / 2) .attr("dy", ".35em") .text(function (d) { return d; });
Шаг 7. Рабочий пример. Теперь давайте создадим гистограмму, используя функцию d3.scaleLinear (), следующим образом.
Создайте веб-страницу «scale.html» и добавьте в нее следующие изменения.
<!DOCTYPE html> <html> <head> <script type = "text/javascript" src = "https://d3js.org/d3.v4.min.js"></script> </head> <body> <script> var data = [100, 200, 300, 350, 400, 250] var width = 500, barHeight = 20, margin = 1; var scale = d3.scaleLinear() .domain([d3.min(data), d3.max(data)]) .range([100, 400]); var svg = d3.select("body") .append("svg") .attr("width", width) .attr("height", barHeight * data.length); var g = svg.selectAll("g") .data(data) .enter() .append("g") .attr("transform", function (d, i) { return "translate(0," + i * barHeight + ")"; }); g.append("rect") .attr("width", function (d) { return scale(d); }) .attr("height", barHeight - margin) g.append("text") .attr("x", function (d) { return (scale(d)); }) .attr("y", barHeight / 2).attr("dy", ".35em") .text(function (d) { return d; }); </script> </body> </html>
Приведенный выше код будет отображать следующий результат в браузере.