Vue.js + SVG練習6: ズーム＆パンできる折れ線グラフを書く - No Regrets in Bathing

ズーム＆パンできる折れ線グラフを書いた。グリッドライン付き。 こういったグラフや、ズーム・パンはd3の得意技なのだけれど、あえてSVGを組み上げる部分をd3でやらずVueのテンプレート側でやっている。 スケーリングや、グリッドラインの位置決めなんかは、d3のコア部分の「d3-scale」というライブラリを利用した。 実際描画部分は全く苦労していなくて、グリッドラインも含めてたったのこれだけ。 <template> <svg :width="w" :height="h" @wheel="wheel" @pointerdown="startDrag" @pointermove="onDrag" @pointerup="stopDrag"> <polyline fill="none" stroke="#793" :points="points"></polyline> <line class="