Vue でデータ視覚化関係図 (関係図など) を表示する方法
データ分析および視覚化テクノロジーの発展に伴い、データ間の関係を示すためにリレーショナル グラフを使用するアプリケーションがますます増えています。Vue では、サードパーティ ライブラリ Vis.js を使用して関係グラフの表示を実現し、Vue コンポーネントを介してデータ バインディングと対話を実行できます。この記事では、Vue で Vis.js を使用して関係グラフを作成し、データ バインディングと対話関数を実装する方法を紹介します。
Vis.js の概要
Vis.js は、インタラクティブなデータ視覚化を作成するための JavaScript ライブラリです。開発者がリレーショナル グラフ、タイムライン、マップなどを含むさまざまなタイプの図を簡単に作成できるようにする一連のツールと API を提供します。Vis.js にはグラフィカル インターフェイスも用意されており、開発者は直感的に図を作成できます。
Vue で Vis.js を使用すると、Vue コンポーネントを通じて関係グラフを作成し、Vue アプリケーションに埋め込むことができます。
Vis.js をインストールする
Vue で Vis.js を使用するには、まず Vis.js ライブラリをインストールする必要があります。次のコマンドでインストールできます。
npm install vis --save
Vue コンポーネントを作成する
以下は、関係グラフを作成するための単純な Vue コンポーネントです。
<template>
<div ref="container"></div>
</template>
<script>
import {
DataSet, Network } from 'vis'
export default {
props: {
nodes: {
type: Array,
required: true,
},
edges: {
type: Array,
required: true,
},
},
data() {
return {
network: null,
}
},
mounted() {
this.init()
},
methods: {
init() {
// 创建数据集
const nodesDataSet = new DataSet(this.nodes)
const edgesDataSet = new DataSet(this.edges)
// 创建关系图谱
const container = this.$refs.container
const data = {
nodes: nodesDataSet, edges: edgesDataSet }
const options = {
}
this.network = new Network(container, data, options)
},
},
watch: {
nodes() {
this.network.setData({
nodes: this.nodes, edges: this.edges })
},
edges() {
this.network.setData({
nodes: this.nodes, edges: this.edges })
},
},
}
</script>
上記のコードでは、まず Vis.js ライブラリを導入し、Vue コンポーネントを定義しました。props では、ノードとエッジという 2 つの配列パラメーターを定義します。これらは、関係グラフのノードとエッジのデータを受け取るために使用されます。実装されたフック関数では、init メソッドを呼び出して関係グラフを作成します。init メソッドでデータセットを作成し、Network クラスを使用して関係グラフを作成します。最後に、watch を使用してノードとエッジのパラメーターの変更を監視し、データ バインディングを実現します。
関係グラフを使用する
以下は、上記の Vue コンポーネントを使用して関係グラフを表示する方法を示す簡単な例です。
<template>
<div>
<div>
<label>节点数：</label>
<input v-model="nodeCount" type="number" min="1" max="100" step="1" @change="generateData" />
</div>
<div>
<label>边数：</label>
<input v-model="edgeCount" type="number" min="1" max="100" step="1" @change="generateData" />
</div>
<div>
<relation-graph :nodes="nodes" :edges="edges" />
</div>
</div>
</template>
<script>
import RelationGraph from '@/components/RelationGraph.vue'
export default {
components: {
RelationGraph,
},
data() {
return {
nodeCount: 10,
edgeCount: 15,
nodes: [],
edges: [],
}
},
mounted() {
this.generateData()
},
methods: {
generateData() {
// 生成节点数据
this.nodes = []
for (let i = 1; i <= this.nodeCount; i++) {
this.nodes.push({
id: i, label: `Node ${
i}` })
}
// 生成边数据
const maxEdgeCount = (this.nodeCount * (this.nodeCount - 1)) / 2
const edgeCount = Math.min(this.edgeCount, maxEdgeCount)
const edges = new Set()
while (edges.size < edgeCount) {
const source = Math.floor(Math.random() * this.nodeCount) + 1
const target = Math.floor(Math.random() * this.nodeCount) + 1
if (source !== target) {
edges.add(`${
Math.min(source, target)}-${
Math.max(source, target)}`)
}
}
this.edges = Array.from(edges).map((edge) => {
const [source, target] = edge.split('-')
return {
from: source, to: target }
})
},
},
}
</script>
上記のコードでは、最初に以前に定義したリレーショナル グラフ コンポーネント RelationGraph を導入し、次に生成されるノードとエッジの数を制御するためにテンプレートに入力ボックスを定義しました。最後に、RelationGraph コンポーネントを使用して関係グラフを表示し、props を介してノードとエッジのデータを渡します。
マウントされたフック関数では、generateData メソッドを呼び出してノードとエッジのデータを生成します。generateData メソッドでは、Math.random 関数を使用してランダムなノードとエッジを生成し、それらをノードとエッジのパラメーターに割り当てます。
インタラクティブな機能を実装する
Vis.js では、イベントを通じて対話型関数を実装できます。たとえば、クリック イベントをリッスンして、ノードのクリック操作を実現できます。以下は、ノードをクリックしたときにノード情報をポップアップする機能を実装する例です。
<template>
<div>
<div>
<label>节点数：</label>
<input v-model="nodeCount" type="number" min="1" max="100" step="1" @change="generateData" />
</div>
<div>
<label>边数：</label>
<input v-model="edgeCount" type="number" min="1" max="100" step="1" @change="generateData" />
</div>
<div>
<relation-graph :nodes="nodes" :edges="edges" @clickNode="handleClickNode" />
</div>
</div>
</template>
<script>
import RelationGraph from '@/components/RelationGraph.vue'
export default {
components: {
RelationGraph,
},
data() {
return {
nodeCount: 10,
edgeCount: 15,
nodes: [],
edges: [],
}
},
mounted() {
this.generateData()
},
methods: {
generateData() {
// 生成节点数据
this.nodes = []
for (let i = 1; i <= this.nodeCount; i++) {
this.nodes.push({
id: i, label: `Node ${
i}` })
}
// 生成边数据
const maxEdgeCount = (this.nodeCount * (this.nodeCount - 1)) / 2
const edgeCount = Math.min(this.edgeCount, maxEdgeCount)
const edges = new Set()
while (edges.size < edgeCount) {
const source = Math.floor(Math.random() * this.nodeCount) + 1
const target = Math.floor(Math.random() * this.nodeCount) + 1
if (source !== target) {
edges.add(`${
Math.min(source, target)}-${
Math.max(source, target)}`)
}
}
this.edges = Array.from(edges).map((edge) => {
const [source, target] = edge.split('-')
return {
from: source, to: target }
})
},
handleClickNode(event) {
alert(`你点击了节点：${
event.nodes[0]}`)
},
},
}
</script>
上記のコードでは、RelationGraph コンポーネントに @clickNode イベント リスナーを追加し、handleClickNode メソッドを定義しました。handleClickNode メソッドでは、alert 関数を使用してノード情報をポップアップします。
要約する
この記事では、Vue で Vis.js を使用して関係グラフを作成し、データ バインディングおよび対話関数を実装する方法を紹介します。この記事の導入部を通じて、Vue プロジェクトで Vis.js ライブラリを使用して関係グラフを表示し、データ バインディングおよび対話関数を実装する方法を学ぶことができます。この記事があなたのお役に立てば幸いです。