Vue.js公式サイトの「SVGグラフの例」は、SVGでレーダーチャートを描き、値がスライダで動的に操作できます。さらに、データを新たに加えたり除いたりすることも可能です。この作例をECMAScript 2015 (ECMAScript 6)の構文に改めたうえ、コードの手直しも加えてみました(サンプル001)。その改善の要点をかいつまんでご説明します。コードの詳しい解説は「Vue.js + ES6: SVGでレーダーチャートを操作する」をお読みください。
サンプル001■ Vue.js + ES6: Radar chart with SVG controlled dynamically - final
See the Pen Vue.js + ES6: Radar chart with SVG controlled dynamically - final by Fumio Nonaka (@FumioNonaka) on CodePen.
#ECMAScript 2015の構文に書き替える
公式作例は、つぎのようなECMAScript 5の構文で書かれています。
var stats = [
]
Vue.component('polygraph', {
computed: {
points: function () {
}
},
});
ECMAScript 2015では、変数は基本的にconstまたはletで宣言します。また、オブジェクトにメソッドを定めるとき、コロン(:)とfunctionキーワードが省けます(「ECMAScript 2015での新しい表記法」)。
const stats = [
];
Vue.component('polygraph', {
computed: {
points() {
}
},
});
#SVGの円のデータとコードを関連づける
公式作例でレーダーチャートの頂点座標を求める関数には、つぎのような直打ちされた数値があります。
function valueToPoint (value, index, total) {
var y = -value * 0.8
var tx = x * cos - y * sin + 100
var ty = x * sin + y * cos + 100
}
この数値は、SVGの<circle>要素の属性値からきています。円の中心座標が(100, 100)、半径はチャートの値が100%のとき80ピクセルということです。
<script type="text/x-template" id="polygraph-template">
<g>
<circle cx="100" cy="100" r="80"></circle>
</g>
</script>
そこで、これら<circle>要素の属性値はオブジェクトのプロパティにまとめ、JavaScriptコードはその値を参照することにします。
const circle = {cx: 100, cy: 100, r: 80};
function valueToPoint(value, index, total) {
const y = -value * circle.r / 100;
const tx = x * cos - y * sin + circle.cx;
const ty = x * sin + y * cos + circle.cy;
}
<body>要素とテンプレートは、v-bindディレクティブ(省略記法:)でオブジェクトをバインディングして用います。
<body>
<div id="demo">
<svg width="200" height="200">
<polygraph :stats="stats" :circle="circle"></polygraph>
</svg>
</div>
</body>
<script type="text/x-template" id="polygraph-template">
<g>
<circle :cx="circle.cx" :cy="circle.cy" :r="circle.r"></circle>
</g>
</script>
#原点からの距離と角度により座標を求める
任意の点$(x, y)$を、原点$(0, 0)$から角度$\theta$回した座標$(x', y')$はつぎの式で求められます(「任意の座標を原点から指定した角度回す」参照)。座標の原点からの距離を求めなくて済み、多くの点を同じ角度回す場合は便利です。
x' = x\cos\theta - y\sin\theta\\
y' = x\sin\theta + y\cos\theta
公式作例では、レーダーチャートの頂点座標をこの式で導いています。
function valueToPoint (value, index, total) {
var x = 0
var y = -value * 0.8
var angle = Math.PI * 2 / total * index
var cos = Math.cos(angle)
var sin = Math.sin(angle)
var tx = x * cos - y * sin + 100
var ty = x * sin + y * cos + 100
return {
x: tx,
y: ty
}
}
けれど、この作例では頂点座標の原点からの距離が予め(パーセンテージで)与えられており、角度は頂点ごとに異なります。この場合、距離$r$と角度$\theta$から座標を求めるつぎの式の方が端的でしょう。
x = r\cos\theta\\
y = r\sin\theta
####三角関数のsinとcos
function valueToPoint(value, index, total) {
const r = value * circle.r / 100;
const angle = Math.PI * 2 / total * index - Math.PI / 2;
const tx = r * Math.cos(angle) + circle.cx;
const ty = r * Math.sin(angle) + circle.cy;
return {
x: tx,
y: ty
};
}
#Vue.js「スタイルガイド」に合わせる
Vue.js「スタイルガイド」で「優先度A: 必須」の修正も加えます。まず、コンポーネントのpropsです。
Vue.component('polygraph', {
props: ['stats'],
});
プロパティには、少なくともタイプを定めるべきです(「プロパティの定義」参照)。
Vue.component('polygraph', {
props: {
stats: Array,
},
});
つぎに、v-forディレクティブには、key属性を与えなければなりません(「キー付きv-for」参照)。keyがないと、開発用のVue.jsはコンソールにつぎのような警告を示します。
[Vue tip]: : component lists rendered with v-for should have explicit keys. See https://vuejs.org/guide/list.html#key for more info.
そこで、レーダーチャート用のデータに、一意のプロパティを加えます。Array.prototype.map()メソッドでインデックスの値を与えることで、手打ちの手間は省きました。
const stats = [
{label: 'A', value: 100},
{label: 'B', value: 100},
{label: 'C', value: 100},
{label: 'D', value: 100},
{label: 'E', value: 100},
{label: 'F', value: 100}
].map((stat, index) => {
stat.id = index;
return stat;
});
そして、v-forディレクティブが用いられた要素には、keyにプロパティ値を定めます。
<body>
<div id="demo">
<div v-for="stat in stats"
:key="stat.id">
</div>
</div>
</body>
<script type="text/x-template" id="polygraph-template">
<g>
<axis-label
v-for="(stat, index) in stats"
:key="stat.id">
</axis-label>
</g>
</script>
データを加えるメソッドも、一意の数値をプロパティとして加えなければなりません。Array.prototype.map()メソッドですでに使われている値を取り出し、Math.max()メソッドにより得た最大値に1を加えたのが新たな値です。ECMAScript 2015から備わったスプレッド構文...は、配列をカンマ(,)区切りの引数として渡します。
const vm = new Vue({
methods: {
add(event) {
this.stats.push({
id: this.getNewId()
})
},
getNewId() {
const ids = this.stats.map((stat) => stat.id);
return Math.max(...ids) + 1;
}
}
});
#その他の修正
ほかにも、細かい修正を3つほど加えました。第1に、公式作例はVue()コンストラクタのオプションオブジェクトにelでアプリケーションとする要素を定めています。
new Vue({
el: '#demo',
})
このelは省いて、DOMContentLoadedイベントのリスナー関数からvm.$mount()メソッドを呼び出すようにしました。これで、JavaScriptコードは<head>要素に書けます。
const vm = new Vue({
});
document.addEventListener('DOMContentLoaded', (event) =>
vm.$mount('#demo')
);
第2に、公式作例は新たなデータを加えるとき、テキストが空かどうかしか確かめていません。これですと、スペースだけでも通ってしまいます。
new Vue({
methods: {
add: function (e) {
if (!this.newLabel) return
this.newLabel = ''
},
}
})
そこで、String.prototype.trim()メソッドを用いて、スペースだけの場合も弾くこととしました。
const vm = new Vue({
methods: {
add(event) {
const newLabel = this.newLabel.trim();
this.newLabel = '';
if (!newLabel) {return}
},
}
});
第3は、公式作例がデータの削除にArray.prototype.indexOf()メソッドを使っていることです。このメソッドを用いるとき気をつけなければならないのは、参照する配列そのものが変わってしまうことです。配列要素のループ処理で用いると、取り出す順序が壊されるおそれもあります。
new Vue({
methods: {
remove: function (stat) {
if (this.stats.length > 3) {
this.stats.splice(this.stats.indexOf(stat), 1)
} else {
}
}
}
})
もっとも、この例では配列そのものからデータを除きたいわけですし、ループ処理でもありません。けれど、ECMAScript 5.1の新しいメソッドとしてArray.prototype.filter()を使うことにしました。引数の関数に定めたのは、削除する要素以外という条件です。これで、その要素の除かれた配列に改められます。
const vm = new Vue({
methods: {
remove(stat) {
const stats = this.stats;
if (stats.length > 3) {
this.stats = stats.filter((_stat) => _stat !== stat);
} else {
}
},
}
});