この記事は CivicTechテック好き Advent Calendar 2020 の 3 日目の記事です。 この記事について この記事では Vue.js と d3.js を組み合わせて SVG のシンプルな線グラフを書く際の、各要素の実装方法をまとめています。 Vue.js と d3.js の役割は、データや DOM の更新に対する処理の部分で一部被っているところがあるため、それらをどちらに担当させるかによって、組み合わせ方が何通りか存在します。この記事の方法では、データの更新と各要素の計算タイミングを Vue.js に、数値計算や軸の DOM 更新を d3.js に担当させています。 最小限のコードで動く完成品が CodePen に置いてあります。各種プロパティを input で変更できるようにもしています。 余談: この記事と CivicTech の関係性(がないこと)について 記事
