VueでD3触ってみた

<template>
  <div class="hello">
    <div id="vue">
			// svg要素を追加
      <svg
        id="circle"
        :width="width"
        :height="height"
        style="border: 1px dotted"
      ></svg>
			// rangeと同期した数値を表示
      <div>r: {{ r }}</div>
      <div><input type="range" v-model="r" min="1" max="150" step="1" /></div>
    </div>
  </div>
</template>

<script>
// D3をインポート
import * as d3 from "d3";
export default {
  name: "HelloWorld",
  data() {
    return {
			// 横幅指定
      width: 400,
			// 縦幅指定
      height: 250,
			// rangeの初期値
      r: 75,
    };
  },
  mounted: function () {
		// d3.selectで編集したい要素を指定
    var svg = d3.select("#circle");
    this.circle = svg
      .append("circle") // 要素追加
      .attr("cx", this.width / 2) // width属性追加
      .attr("cy", this.height / 2) // height属性追加
      .attr("r", this.r) // range属性を追加
      .style("fill", "rgba(0, 0, 0, 0.8)"); // fill属性で要素に色をつける
  },
	// 監視対象の定義
  watch: {
    r: function (newValue) {
			// range属性を監視
      this.circle.attr("r", newValue);
    },
  },
};
</script>

.......
.......
.......