vue实现韦恩图
使用 Vue 实现韦恩图
安装依赖库
需要安装 d3.js 和 vue-d3-wrapper 来处理图形渲染和数据绑定。通过 npm 安装：
npm install d3 vue-d3-wrapper基础组件结构
创建一个 Vue 组件，用于包裹 D3 的韦恩图逻辑：
<template>
<div ref="vennContainer" class="venn-diagram"></div>
</template>
<script>
import * as d3 from 'd3';
import { venn } from 'venn.js';
export default {
name: 'VennDiagram',
props: {
sets: { type: Array, required: true }
},
mounted() {
this.drawVennDiagram();
},
methods: {
drawVennDiagram() {
const chart = venn.VennDiagram();
d3.select(this.$refs.vennContainer).datum(this.sets).call(chart);
}
}
};
</script>
<style>
.venn-diagram {
width: 500px;
height: 500px;
}
</style>数据格式
传入的 sets 数据需符合以下格式，描述集合的交集与独立部分：
[
{ sets: ['A'], size: 10 },
{ sets: ['B'], size: 10 },
{ sets: ['A', 'B'], size: 5 }
]动态更新
添加监听器以响应数据变化：
watch: {
sets: {
handler(newVal) {
d3.select(this.$refs.vennContainer).datum(newVal).call(venn.VennDiagram());
},
deep: true
}
}交互功能
为韦恩图添加鼠标悬停效果：
methods: {
drawVennDiagram() {
const chart = venn.VennDiagram()
.width(500)
.height(500)
.on('mouseover', (event, d) => {
// 高亮显示当前区域
});
d3.select(this.$refs.vennContainer).datum(this.sets).call(chart);
}
}自定义样式
通过 CSS 调整颜色和边框：
.venn-circle {
fill-opacity: 0.6;
stroke-width: 2;
}
.venn-intersection {
fill: #ff6b6b;
}注意事项
- 确保数据中的
size值合理，避免图形比例失调。 - 若需兼容移动端，需额外处理触摸事件。
- 复杂布局时，可通过
venn.venn的layoutFunction自定义位置算法。
