Блог

Главная - Вопросы по программированию - Как установить заполнение в непрерывных масштабах (например, scaleLinear) в d3.js версия 4?

Как установить заполнение в непрерывных масштабах (например, scaleLinear) в d3.js версия 4?

#javascript #d3.js

#javascript #d3.js

Вопрос:

Я пытаюсь установить заполнение штрихов в моей гистограмме почти так же, как если бы у вас была порядковая шкала: 

 x = d3.scaleLinear()
    .domain([fist, last])
    .rangeRound([bottom, top])
    .padding(someFractionBetweenZeroAndOne)

Нет. Это не работает. Итак, тогда я направляюсь к документации API, там нет .padding метода в непрерывных масштабах!

Ну, я мог рассчитать ширину полосы вручную, но действительно ли нет интегрированного padding решения, доступного для непрерывных масштабов?

Ответ №1:

Нет смысла иметь заполнение в линейном масштабе!

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

Другой альтернативой является изменение положения и размеров прямоугольников (как вы сказали, «вычислите ширину моей полосы вручную»). Например, в этой демонстрации я изменяю ширину каждой полосы на 90% от ширины каждой ячейки.

 var data = [{x:0, y:10},
            {x:2, y:40},
            {x:4, y:70},
            {x:6, y:30},
            {x:8, y:20}];

var svg = d3.select("body")
  .append("svg")
  .attr("width", 300)
  .attr("height", 200);

var xScale = d3.scaleLinear()
  .domain([0, 10])
  .range([0, 300]);

var barWidth = xScale.domain()[1]/data.length;

var yScale = d3.scaleLinear()
  .domain([0, 80])
  .range([200, 0]);

var bars = svg.selectAll(".bars")
  .data(data)
  .enter()
  .append("rect");

bars.attr("x", function(d){ return xScale(d.x)})
  .attr("y", function(d){ return yScale(d.y)})
  .attr("width", function(d,i){ return xScale(barWidth) * 0.9})
  .attr("height", function(d){ return 200 - yScale(d.y)});  
 rect {
  fill: teal;
  }  
 <script src="https://d3js.org/d3.v4.min.js"></script>

Комментарии:

1. Да, на данный момент я вычисляю ширину полосы и смещения аналогичным образом. Что более важно, есть ли, следовательно, какой-либо способ применить заполнение к функции гистограммы bin (для настройки x0 amp; x1), учитывая, что часто ее конечной целью является отображение порядковой функции в непрерывном масштабе (т. Е. То, что я пытаюсь сделать)?

2. Насколько я знаю, x0 и x1 автоматически генерируются функцией гистограммы. Я предлагаю вам опубликовать этот конкретный вопрос в качестве другого сообщения.

3. На самом деле, я предполагаю, что технически ответ по-прежнему таков: это не имеет смысла , потому что, если у вас есть ячейка, масштаб первой ячейки которой равен [0,10] , с заполнением 20% для эффективного отображения [1,9] , наблюдатель может запутаться, попадает ли значение 0.5 в эту ячейку.

4. Действительно: у вас не может быть пробелов между интервалами класса ( mathworld. wolfram.com/FrequencyDistribution.html ). Вы можете просто манипулировать графическим результатом, но только минимально, чтобы разделить столбцы.