#javascript #svg #d3.js #svelte
Вопрос:
Я пытаюсь увеличить части линейного графика с помощью окна просмотра. Мне удалось заставить его работать, однако, я не уверен, как справиться с тем фактом, что все масштабируется соответствующим образом (путь линии также становится больше).
То, что я ищу, — это чтобы линия оставалась постоянной во время масштабирования. Я исследовал, что существует также способ перевода и масштабирования, но не знаю, как его реализовать.
Кроме того, я не уверен, как сделать это поведение более автоматическим. Например, я увеличиваю масштаб в диапазоне между двумя годами: 2010 и 2011. В настоящее время я указываю значение y вручную. Но в идеале это должно быть указано при использовании функции yScale.
Любая помощь будет оценена по достоинству!
Вот мой ответ: https://svelte.dev/repl/be0df7e353334108b3d432d5c82a6cd3?version=3.38.2
Ответ №1:
Один из способов добиться этого-масштабирование viewBox
<svg>
элемента.
Вы можете сделать это, связав x
, y
, width
и height
из viewBox
.
<svg ... viewBox="{x} {y} {width} {height}">
Вы также можете переключаться между изменениями в окне просмотра:
- Используя
tweened()
магазин Svelte дляx
,y
,width
,height
. ie<svg viewBox="{$x} {$y} {$width} {$height}">
- Или с помощью
<animate>
элемента SVG. т.е.<animate attributeName="viewBox" values="..." dur="2s"/>