Ответ 1

Что касается Порядковые весы:

Обычные шкалы имеют дискретный домен, например набор имен или категорий.

Порядковые значения шкалы должны быть принудительными для строки, а стробированная версия значения домена однозначно идентифицирует соответствующее значение диапазона.

Итак, в качестве примера, домен порядковой шкалы может содержать имена, например:

var ordinalScale = d3.scale.ordinal()
        .domain(['Alice', 'Bob'])
        .range([0, 100]);

ordinalScale('Alice'); // 0
ordinalScale('Bob'); // 100

Обратите внимание, как все значения являются строками. Они не могут быть интерполированы. Что между "Алисой" и "Боб"? Я не знаю. Также D3.

Теперь, что касается Количественные шкалы (например, линейные шкалы):

Количественные масштабы имеют непрерывную область, такую ​​как набор действительных чисел или дат.

В качестве примера вы можете построить следующую шкалу:

var linearScale = d3.scale.linear()
        .domain([0, 10])
        .range([0, 100]);

linearScale(0); // 0
linearScale(5); // 50
linearScale(10); // 100

Обратите внимание, что D3 может интерполировать 5, даже если мы не указали его явно в домене.

Посмотрите этот jsfiddle, чтобы увидеть приведенный выше код в действии.

Ответ 2

В шкале D3.js преобразование числа из домена в диапазон. Для линейного масштаба область будет непрерывной переменной с неограниченным диапазоном значений, которая затем может быть преобразована в непрерывный диапазон. Для порядковых шкал будет дискретная область, например месяцы года, где имеется ограниченный диапазон возможных значений, которые могут быть упорядочены, но не являются непрерывными. API-документы в Github, вероятно, могут объяснить разницу лучше, чем у меня

Ответ 3

ОК, мы можем начать изучать его, используя как те же данные, чтобы видеть различия (я использую d3 v4), представьте, что у нас есть данные ниже с использованием шкал ordinal и linear:

const data = [1, 2, 3, 4, 5];

const scaleLinear = d3.scaleLinear()
  .domain([0, Math.max(...data)]).range([1, 100]);

const scaleOrdinal = d3.scaleOrdinal()
  .domain(data).range(['one', 'two', 'three', 'four', 'five']);

Теперь мы начинаем называть их, чтобы увидеть результат:

scaleLinear(1); //20
scaleOrdinal(1); //one

scaleLinear(2); //40
scaleOrdinal(2); //two

scaleLinear(5); //100
scaleOrdinal(5); //five

Посмотрите на функции и результаты, которые мы получаем, как вы видите в ординальном, мы сопоставляем данные с нашим диапазоном, в то время как в линейном мы растягиваемся до диапазона, поэтому в этих случаях, например, scaleLinear ( 1) вернет 20... наш домен max 100 и 100, деленный на 5, равен 20, поэтому scaleLinear (1) 20 и scaleLinear (2) 40...

Но, как вы видите, scaleOrdinal (1) является отображением массива в диапазоне, поэтому он равен одному и scaleOrdinal (2) равно два...

Итак, как вы можете использовать эти шкалы, scaleLinear полезно для многих вещей, включая отображение масштаба на странице, но scaleOrdinal более полезно для получения данных в порядке, как это объясняется в документации:

# d3.scaleLinear() < >

Создает новый непрерывный масштаб с единичным доменом [0, 1], диапазон единиц измерения [0, 1], интерполятор по умолчанию и фиксация отключены. Линейные весы являются хорошим выбором по умолчанию для непрерывного количественного потому что они сохраняют пропорциональные различия. Каждое значение диапазона y может быть выражена как функция значения домена x: y = mx + b.

d3.scaleOrdinal([диапазон]) < >

Создает новый порядковый масштаб с пустым доменом и указанным ассортимент. Если диапазон не указан, по умолчанию используется пустой массив; порядковый масштаб всегда возвращает undefined до тех пор, пока непустой диапазон не будет определены.

Также это хороший пример из d3 по глубине с использованием как ординарной, так и линейной шкал в то же время:

var myData = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']

var linearScale = d3.scaleLinear()
  .domain([0, 11])
  .range([0, 600]);

var ordinalScale = d3.scaleOrdinal()
  .domain(myData)
  .range(['black', '#ccc', '#ccc']);

d3.select('#wrapper')
  .selectAll('text')
  .data(myData)
  .enter()
  .append('text')
  .attr('x', function(d, i) {
    return linearScale(i);
  })
  .text(function(d) {
    return d;
  })
  .style('fill', function(d) {
    return ordinalScale(d);
  });

body {
  font-family: "Helvetica Neue", Helvetica, sans-serif;
  font-size: 14px;
  color: #333;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.2.2/d3.min.js"></script>

<svg width="800" height="60">
  	<g id="wrapper" transform="translate(100, 40)">
  	</g>
</svg>