SVG Polyline увеличивает точки Y

Есть ли способ увеличить точки Y на SVG. Мои точки Y находятся на десятичном промежутке. Когда вы посмотрите на него в браузере, он будет выглядеть как прямая линия.

<svg viewBox="0 0 500 100" class="chart">    
  <polyline fill="none" stroke="#0074d9" stroke-width="1"
      points="
        0,55.15
        110,55.43
        220,55.98
        330,56.01
        440,56.09
  "/>  
</svg>

Ваше здоровье!

1-й рис. Текущий при запуске svg в браузере введите здесь описание изображения

2-й рис. Чего я пытаюсь достичь

введите здесь описание изображения


svg polyline
person drexsien    schedule 05.07.2018    source источник
comment
Мне неясна ваша цель здесь. Ожидается, что полилиния покажет именно это — линию. Так чего именно вы пытаетесь достичь?   -  person Sirko    schedule 05.07.2018
comment
Я пытаюсь создать простой график.   -  person drexsien    schedule 05.07.2018
comment
Вы говорите, что хотите увеличить количество очков. Это вершины внутри этой линии? Может быть, вы можете как-то набросать желаемый результат.   -  person Sirko    schedule 05.07.2018
comment
конечно, я создам один. Спасибо   -  person drexsien    schedule 05.07.2018
comment
Пробел между строками просто десятичный. Если вы запустите его, он будет выглядеть как прямая линия. Чего я хочу добиться, так это показать взлеты и падения на полилинии, как на графике. Я все еще делаю скетч   -  person drexsien    schedule 05.07.2018
comment
координаты y не сильно меняются, поэтому то, что вы видите, представляет собой прямую линию. Почему вы не ожидали, что это будет прямая линия? Что такое десятичный пробел?   -  person Robert Longson    schedule 05.07.2018
comment
Как вы можете видеть, разрыв в точках Y находится только в десятичной дроби. 55.15, 55.43, так что точки Y не будут сильно отражаться, это будет выглядеть как прямая линия.   -  person drexsien    schedule 05.07.2018
comment
@Sirko Я уже добавил скетч   -  person drexsien    schedule 05.07.2018
comment
Вы создаете эту диаграмму вручную или используете какую-то библиотеку? d3js, например, предлагает способ установить минимум/максимум для шкалы. Поэтому, если ваша шкала просто использует диапазон, скажем, 54–56, вы получите что-то близкое к желаемому результату.   -  person Sirko    schedule 05.07.2018
comment
Я пытаюсь создать его вручную, так как он будет отображаться во всплывающей подсказке для определенного значения. Наличие его в библиотеке сделает загрузку сайта очень медленной.   -  person drexsien    schedule 05.07.2018
comment
Хорошо, тогда вам придется сделать масштабное преобразование самостоятельно. По сути, вы сопоставляете входной домен с выходным диапазоном. Таким образом, на входе может быть [54,56], а на выходе [0, 100]. В простом случае вы выбираете линейную функцию для передачи между обоими интервалами, сопоставляя каждое значение домена со значением в диапазоне.   -  person Sirko    schedule 05.07.2018
comment
Можете ли вы указать мне какие-либо документы, касающиеся вашего предложения, или, может быть, пример. Спасибо   -  person drexsien    schedule 05.07.2018
comment
Измените значения viewBox, чтобы они не менялись от 0 до 100 по оси Y, а больше подходили для вашего набора данных.   -  person Robert Longson    schedule 05.07.2018

Ответы (1)


arrow_upward
2
arrow_downward

Что ж, вот решение, которое предполагает несколько вещей:

  • Вы хотите, чтобы координаты y в вашем SVG соответствовали вашим исходным данным. Если вы хотите этого, то после этого вам нужно перевернуть поверхность рисования, потому что начало координат 0,0 в SVG — это верх, левый, а не нижний, левый, как в большинстве диаграмм.
  • Вы не заботитесь об указании абсолютного масштаба и просто хотите указать относительные изменения, какими бы незначительными они ни были, и вас не волнует относительный масштаб осей X и Y.

Итак, это добавляет CSS-преобразование, которое переворачивает вашу строку по вертикали, сжимает viewBox, так что ось y увеличивается до середины пятидесятых. А затем сжимает получившийся рисунок в пространство для рисования с помощью saveAspectRatio/meet (я не стал переделывать вашу ось X, я просто уменьшил ее до 10%, переместив десятичный знак).

#tooltip-flip{
  background: #DDD;
  transform-origin: 50%, 50%;
  transform: scaleY(-1);
}
<svg id="tooltip-flip" viewBox="-0.25 54.7 4.8 1" width="500px" height="200px" preserveAspectRatio="xMinYMin meet">    
  <polyline fill="none" stroke="#0074d9" stroke-width="0.005"
      points="0,55.15 1.10,55.43 2.20,55.98 3.30,56.01 4.40,56.09"/>  
</svg>

person Michael Mullany    schedule 05.07.2018
comment
Идеально! Спасибо, Майкл! - person drexsien; 06.07.2018