D3. js проблема масштаба / диапазона гистограммы. Слишком низкая гистограмма - PullRequest
Новая
       53

D3. js проблема масштаба / диапазона гистограммы. Слишком низкая гистограмма

0 голосов
/ 12 апреля 2020

Я заполнил гистограмму, показывающую ВВП США (популярный из F CC).
https://codepen.io/le-hu/pen/Baoywgd

Проблема, которую я не могу искоренить Это так - график не начинается с нижнего отступа на 50 единиц выше svg bottom, но вместо этого простирается до границы и даже опускается ниже svg border. Я пытался изменить каждую настройку. Моя ставка - что-то не так с доменом yScale или свойством range. 

  const yScale = d3.scaleLinear()
                   .domain([0,
                     d3.max(data.data, d => d[1])])
                   .range([height - padding, padding]);

Кодовые швы игнорируют часть заполнения высоты при настройке диапазона. (или мое понимание этого)

Я бы хотел, чтобы график начинался с линии, которая у нас есть по оси X, и на которой показаны даты в 1950+ годах.

Как и в оригинале:
https://codepen.io/freeCodeCamp/pen/GrZVaM

спасибо за понимание!

Решение Мехди работало как очарование - большое спасибо за ваше время!

1 Ответ

0 голосов
/ 12 апреля 2020

В SVG вертикальные координаты go сверху вниз ( ссылка ).

Это дает основания для координат y и height вертикальной черты в гистограмме менее просто.

Учебное пособие Давайте создадим гистограмму, часть 4 объясняет, как это сделать.

позиция y прямоугольника имеет Правильно установлено одно из значений d[1]: 

.attr("y", (d, i) => yScale(d[1]))

Хотя высота прямоугольника неверна. Это должно быть расстояние между источником (значение 0) и положением значения d[1]. Как показано ниже: 

.attr("height", (d, i) => yScale(0)- yScale(d[1]))
...