D3.js - API массивов

D3 содержит набор модулей. Вы можете использовать каждый модуль независимо или набор модулей вместе для выполнения операций. В этой главе подробно рассказывается о Array API.

Что такое массив?

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

Настройка API

Вы можете легко настроить API, используя приведенный ниже скрипт.

<script src = "https://d3js.org/d3-array.v1.min.js"></script>
<body>
   <script>
   </script>
</body>

Методы API статистики массива

Ниже приведены некоторые из наиболее важных методов API статистики массивов.

d3.min(array)
d3.max(array)
d3.extent(array)
d3.sum(array)
d3.mean(array)
d3.quantile(array)
d3.variance(array)
d3.deviation(array)

Давайте подробно обсудим каждый из них.

d3.min (массив)

Он возвращает минимальное значение в данном массиве в естественном порядке.

Example - Рассмотрим следующий сценарий.

<script>
   var data = [20,40,60,80,100];
   console.log(d3.min(data));
</script>

Result - Приведенный выше сценарий возвращает минимальное значение в массиве 20 в вашей консоли.

d3.max (массив)

Он возвращает максимальное значение в данном массиве.

Example - Рассмотрим следующий сценарий.

<script>
   var data = [20,40,60,80,100];
   console.log(d3.max(data));
</script>

Result - Приведенный выше сценарий возвращает максимальное значение в массиве (100) в вашей консоли.

d3.extent (массив)

Он возвращает минимальное и максимальное значение в данном массиве.

Example - Рассмотрим следующий сценарий.

<script>
   var data = [20,40,60,80,100];
   console.log(d3.extent(data));
</script>

Result - Приведенный выше сценарий возвращает значение экстента [20,100].

d3.sum (массив)

Он возвращает сумму заданного массива чисел. Если массив пуст, он возвращает 0.

Example - Обратите внимание на следующее ниже.

<script>
   var data = [20,40,60,80,100];
   console.log(d3.sum(data));
</script>

Result - Приведенный выше сценарий возвращает значение суммы 300.

d3.mean (массив)

Он возвращает среднее значение заданного массива чисел.

Example - Обратите внимание на следующее ниже.

<script>
   var data = [20,40,60,80,100];
   console.log(d3.mean(data));
</script>

Result - Приведенный выше сценарий возвращает среднее значение 60. Аналогичным образом вы можете проверить медианное значение.

d3.quantile (массив)

Он возвращает p-квантиль данного отсортированного массива чисел, где p - число в диапазоне [0, 1]. Например, медиана может быть вычислена с использованием p = 0,5, первого квартиля при p = 0,25 и третьего квартиля при p = 0,75. В этой реализации используется метод R-7, язык программирования R по умолчанию и Excel.

Example - Рассмотрим следующий пример.

var data = [20, 40, 60, 80, 100];
d3.quantile(data, 0); // output is 20
d3.quantile(data, 0.5); // output is 60
d3.quantile(data, 1); // output is 100

Аналогичным образом вы можете проверить и другие значения.

d3.variance (массив)

Возвращает дисперсию заданного массива чисел.

Example - Рассмотрим следующий сценарий.

<script>
   var data = [20,40,60,80,100];
   console.log(d3.variance(data));
</script>

Result - Приведенный выше скрипт возвращает значение дисперсии как 1000.

d3.deviation (массив)

Возвращает стандартное отклонение данного массива. Если в массиве меньше двух значений, он возвращается как undefined.

Example - Обратите внимание на следующее ниже.

<script>
   var data = [20,40,60,80,100];
   console.log(d3.deviation(data));
</script>

Result - Приведенный выше сценарий возвращает значение отклонения как 31,622776601683793.

Example- Давайте выполним все методы Array API, обсужденные выше, используя следующий скрипт. Создайте веб-страницу «array.html» и добавьте к ней следующие изменения.

<html>
   <head>
      <script type = "text/javascript" src = "https://d3js.org/d3.v4.min.js"></script>
   </head>

   <body>
      <h3>D3 array API</h3>
      <script>
         var data = [20,40,60,80,100];
         console.log(d3.min(data));  
         console.log(d3.max(data));
         console.log(d3.extent(data));
         console.log(d3.sum(data));
         console.log(d3.mean(data));
         console.log(d3.quantile(data,0.5));
         console.log(d3.variance(data));
         console.log(d3.deviation(data));
      </script>
   </body>
</html>

Теперь запросите браузер, и мы увидим следующий ответ.

Методы API поиска по массиву

Ниже приведены несколько важных методов API поиска по массивам.

d3.scan(array)
d3.по возрастанию (a, b)

Давайте разберемся с обоими подробно.

d3.scan (массив)

Этот метод используется для выполнения линейного сканирования указанного массива. Он возвращает индекс наименьшего элемента указанному компаратору. Ниже приведен простой пример.

Example -

var array = [{one: 1}, {one: 10}];
console.log(d3.scan(array, function(a, b) { return a.one - b.one; })); // output is 0
console.log(d3.scan(array, function(a, b) { return b.one - a.one; })); // output is 1

d3.по возрастанию (a, b)

Этот метод используется для выполнения функции компаратора. Это может быть реализовано как -

function ascending(a, b) {
   return a < b ? -1 : a > b ? 1 : a > =  b ? 0 : NaN;
}

Если для встроенного метода сортировки не указана функция компаратора, по умолчанию используется алфавитный порядок. Вышеупомянутая функция возвращает -1, если a меньше b, или 1, если a больше b, или 0.

Точно так же вы можете выполнить метод по убыванию (a, b). Она возвращает -1, если a больше b, или 1, если a меньше b, или 0. Эта функция выполняет обратный естественный порядок.

Example -

Создать веб-страницу array_search.html и внесите в него следующие изменения.

<html>
   <head>
      <script type = "text/javascript" src = "https://d3js.org/d3.v4.min.js"></script>
   </head>

   <body>
      <h3>D3 array API</h3>
      <script>
         var array = [{one: 1}, {one: 10}];
         console.log(d3.scan(array, function(a, b) { return a.one - b.one; })); // 0
         console.log(d3.scan(array, function(a, b) { return b.one - a.one; })); // 1
      </script>
   </body>
</html>

Теперь запросите браузер, и мы увидим следующий результат.

API преобразования массивов

Ниже приведены некоторые из наиболее известных методов API преобразования массивов.

d3.cross (a, b [, редуктор])
d3.merge(arrays)
d3.pairs (массив [, редуктор])
d3.permute (массив, индексы)
d3.zip(arrays)

Давайте разберемся с каждым из них подробно.

d3.cross (a, b [, редуктор])

Этот метод используется для возврата декартова произведения двух данных массивов a и b. Ниже приведен простой пример.

d3.cross([10, 20], ["a", "b"]); // output is [[10, "a"], [10, "b"], [20, "a"], [20, "b"]]

d3.merge (массивы)

Этот метод используется для объединения массивов и определен ниже.

d3.merge([[10], [20]]); // output is [10, 20]

d3.pairs (массив [, редуктор])

Этот метод используется для объединения элементов массива и определен ниже.

d3.pairs([10, 20, 30, 40]); // output is [[10, 20], [20, 30], [30, 40]]

d3.permute (массив, индексы)

Этот метод используется для выполнения перестановки из указанного массива и индексов. Вы также можете преобразовать значения из объекта в массив. Это объясняется ниже.

var object = {fruit:"mango", color: "yellow"},
   fields = ["fruit", "color"];
d3.permute(object, fields); // output is "mango" "yellow"

d3.zip (массивы)

Этот метод используется для возврата массива массивов. Если массивы содержат только один массив, возвращаемый массив содержит массивы с одним элементом. Если аргумент не указан, возвращаемый массив пуст. Это определено ниже.

d3.zip([10, 20], [30, 40]); // output is [[10, 30], [20, 40]]

Example - Создать веб-страницу array_transform и внесите в него следующие изменения.

<html>
   <head>
      <script type = "text/javascript" src = "https://d3js.org/d3.v4.min.js"></script>
   </head>

   <body>
      <h3>D3 array API</h3>
      <script>
         console.log(d3.cross([10, 20], ["a", "b"]));
         console.log(d3.merge([[10], [30]]));
         console.log(d3.pairs([10, 20, 30, 40]));
         var object = {fruit:"mango", color: "yellow"},
         fields = ["fruit", "color"];
         console.log(d3.permute(object, fields)); 
         console.log(d3.zip([10, 20], [30, 40]));
      </script>
   </body>
</html>

Теперь запросите браузер, и мы увидим следующий ответ.