<head> <script src="https://unpkg.com/vue"></script> <script src="https://d3js.org/d3.v4.min.js"></script> </head> <body> <div id="vue"> <svg id="circle-002" :width="width" :height="height" style="border: 1px dotted"></svg> <div>r: {{ r }}</div> <div><input type="range" v-model="r" min="1" max="150" step="1"></div> </div> <script> new Vue({ el: '#vue', data: { width: 800, height: 500, r: 75 }, mou
![Vue.js で d3.jsを使う その2(svgのcircleの半径を動的に変更する) - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/dd159c319016423d9155afc59c2fbf6398099f8a/height=288;version=1;width=512/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fcdn.qiita.com%252Fassets%252Fpublic%252Farticle-ogp-background-412672c5f0600ab9a64263b751f1bc81.png%3Fixlib%3Drb-4.0.0%26w%3D1200%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTk3MiZoPTM3OCZ0eHQ9VnVlLmpzJTIwJUUzJTgxJUE3JTIwZDMuanMlRTMlODIlOTIlRTQlQkQlQkYlRTMlODElODYlMjAlRTMlODElOUQlRTMlODElQUUyJUVGJUJDJTg4c3ZnJUUzJTgxJUFFY2lyY2xlJUUzJTgxJUFFJUU1JThEJThBJUU1JUJFJTg0JUUzJTgyJTkyJUU1JThCJTk1JUU3JTlBJTg0JUUzJTgxJUFCJUU1JUE0JTg5JUU2JTlCJUI0JUUzJTgxJTk5JUUzJTgyJThCJUVGJUJDJTg5JnR4dC1hbGlnbj1sZWZ0JTJDdG9wJnR4dC1jb2xvcj0lMjMyMTIxMjEmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9NTYmcz0yNjcxNjQ2NzQ1NjJmZDAwY2E2MzczMmY0NjU2ZmQyNQ%26mark-x%3D142%26mark-y%3D57%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZoPTc2Jnc9NzcwJnR4dD0lNDB0b2NoaWppJnR4dC1jb2xvcj0lMjMyMTIxMjEmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9MzYmdHh0LWFsaWduPWxlZnQlMkN0b3Amcz1mNTA0MjNjZmZmODI4MmIzOGY3YTczOTYzNGVkOWM2Ng%26blend-x%3D142%26blend-y%3D486%26blend-mode%3Dnormal%26s%3D0104ae415cc65d2433deb8f0baab0706)