由于不兼容的依赖关系，我不得不从vue3降级到vue2。我已经用D3库创建了一个力定向图。使用compositeAPI的vue3一切正常。我对vue2并不熟悉，将我的图调整到vue2对我来说也不太好。在vue3中，它是非常严格的，ref((使它很容易实现。至于vue2，我已经尝试充分利用生命周期挂钩，如computed和watch
非常欢迎任何帮助
这是我在vue3中工作组件的一个极简主义表示。这个组件在svg中创建图形，然后在模板中渲染它。
<template>
<div class="col" style="position: absolute; width:100%; height:100%" >
<div class="main-map-container" style="overflow: hidden; width: 100%;">
<div ref="graph" class="canvas">
</div>
</div>
</div>
</template>
<script >
import {onMounted, onBeforeMount, ref} from 'vue'
export default {
setup(){
const graph = ref()
const links = [{src:"Amazon",target:"Aurora"},{src:"Amazon",target:"Aurora"},{src:"Amazon",target:"Zoox"},{src:"Amazon",target:"Rivian"}]
const nodes = [{id:"Amazon"},{id:"Aurora"},{id:"Zoox"},{id:"Rivian"}]
onBeforeMount( async ()=>{
const svgobj = ForceGraph(nodes, links)
graph.value.appendChild(svgobj);
})
function ForceGraph(
nodes,
links
){
// The code for the graph has been removed since it is much too long
return Object.assign( svg.node() );
}
return { graph }
}
}
</script>
<style></style>
这是我为这个后清空的vue2组件
<template>
<div class="col" style="position: absolute; width:100%; height:100%" >
<div class="main-map-container" style="overflow: hidden; width: 100%;">
<div ref="graph" class="canvas">
</div>
</div>
</div>
</template>
<script>
export default {
setup(){
},
methods: {
},
watch: {
},
props: {
},
computed: {
},
created() {
},
mounted() {
},
updated(){
},
data() {
return {
}}
}
</script>
<style>
</style>
您可以在vue 2中使用Vue3组合API。安装composition api，然后使用setup方法保持代码不变。
setup方法、生命周期挂钩和所有反应性(refs和反应性对象(都可供您使用，几乎没有不兼容性。
我们一直以这种方式使用d3和Vue2。100%兼容。
https://github.com/vuejs/composition-api