Блог

Я пытаюсь увеличить части линейного графика с помощью окна просмотра. Мне удалось заставить его работать, однако, я не уверен, как справиться с тем фактом, что все масштабируется соответствующим образом (путь линии также становится больше).

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

Кроме того, я не уверен, как сделать это поведение более автоматическим. Например, я увеличиваю масштаб в диапазоне между двумя годами: 2010 и 2011. В настоящее время я указываю значение y вручную. Но в идеале это должно быть указано при использовании функции yScale.

Любая помощь будет оценена по достоинству!

Вот мой ответ: https://svelte.dev/repl/be0df7e353334108b3d432d5c82a6cd3?version=3.38.2

Один из способов добиться этого-масштабирование viewBox <svg> элемента.

Вы можете сделать это, связав x , y , width и height из viewBox .

 <svg ... viewBox="{x} {y} {width} {height}">
 

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

1. Используя tweened() магазин Svelte для x , y , width , height . ie <svg viewBox="{$x} {$y} {$width} {$height}">
2. Или с помощью <animate> элемента SVG. т.е. <animate attributeName="viewBox" values="..." dur="2s"/>