D3.js | Функция d3.scaleBand ()

Опубликовано: 12 Декабря, 2021

Функция d3.scaleBand () в D3.js используется для построения новой шкалы полос с доменом, заданным как массив значений, и диапазоном как минимальным и максимальным пределами полос. Эта функция разбивает диапазон на n диапазонов, где n - количество значений в массиве домена.

Синтаксис:

 d3.scaleBand (). domain (массив значений) .range (массив значений);

Параметры: эта функция не принимает никаких параметров.

Возвращаемое значение: эта функция возвращает соответствующий диапазон для значения домена.

Ниже приведены программы, иллюстрирующие функцию d3.scaleBand () в D3.js:

Пример 1:

 <!DOCTYPE html>
 <html>
 
<head>
    <title>
        D3.js | d3.scaleBand() Function
    </title>
     
    <script src =
        " https://d3js.org/d3.v4.min.js " >
    </script>
 </head>
 
<body>
    <script>
         
        // Calling the scaleBand() function
        var A = d3.scaleBand()
            .domain([ 'January' , 'February' , 'March' , 'April' , 'May' ])
            .range([10, 50]);
         
        // Getting the corresponding range for
        // the domain value
        console.log(A( 'January' ));
        console.log(A( 'February' ));
        console.log(A( 'March' ));
        console.log(A( 'April' ));
        console.log(A( 'May' ));
    </script>
 </body>
 
</html>

Выход:

Пример 2:

 <!DOCTYPE html>
 <html>
 
<head>
    <title>
        D3.js | d3.scaleBand() Function
    </title>
     
    <script src =
        " https://d3js.org/d3.v4.min.js " >
    </script>
 </head>
 
<body>
    <script>
         
        // Calling the scaleBand() function
        var A = d3.scaleBand()
            .domain([ 'January' , 'February' , 'March' , 'April' , 'May' ])
            .range([1, 2]);
          
        // Getting the corresponding range for
        // the domain value
        console.log(A( 'January' ));
        console.log(A( 'February' ));
        console.log(A( 'March' ));
        console.log(A( 'April' ));
        console.log(A( 'May' ));
    </script>
 </body>
 
</html>

Выход:

1
1.2
1.4
1.6
1,8

Ссылка: https://devdocs.io/d3~5/d3-scale#scaleBand

JavaScript

D3.js | Функция d3.scaleBand ()

РЕКОМЕНДУЕМЫЕ СТАТЬИ