vue3+ts 绘制流程图 vueflow 附代码及效果图

最新推荐文章于 2024-04-29 22:11:08 发布
最新推荐文章于 2024-04-29 22:11:08 发布
阅读量4.1k 收藏 6
点赞数 1
分类专栏： vue 文章标签： 流程图 vue typescript vueflow
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_42197013/article/details/131531690
版权

已完成渲染流程图，自定义模板内容(上下分级),自定义样式，新增节点addRandomNode，点击修改节点nodeClickHandler(从父组件传值)

官网：https://vueflow.dev/guide/node.html#node-template
文档比较复杂，很多想找的方法没法一下就找到需要注意

我装了三个，如果npm安装报错可以试试yarn add

    "@vue-flow/background": "^1.2.0",
    "@vue-flow/core": "^1.20.2",
    "vue3-flowchart": "^0.19.1"


<template>
  <div style="height: 500px;">
    <VueFlow v-model="elements" @nodeClick="nodeClickHandler"  fit-view-on-init @edgeClick="clickadd"
      @edge-update="onEdgeUpdate" :style="{ background: 'transparent' }" :default-zoom="1.5">

      <Background :pattern-color="'#aaa'" gap="8" />
      

      <template #node-custom="props">
        <CustomNode :node="props"  />
      </template>
<!-- 新增 @edgeClick="clickadd"  -->
    </VueFlow>
  </div>
  <dynamic-modal :visible="visible" top="15vh" width="500px" :title="title" :form="addForm" :items="items" @submit="submit"
    @reset="reset" @close="close" />

  <dynamic-modal :visible="visible_edit" top="15vh" width="500px" :title="'修改节点'" :form="editForm" :items="items" @submit="submit2"
    @reset="reset" @close="close" />
</template>

 
<script setup>
import { ref, reactive, computed, watch , markRaw } from 'vue'
import { Panel, PanelPosition, VueFlow, useVueFlow , isNode,applyChanges} from '@vue-flow/core'
import { Background } from '@vue-flow/background'
import { onMounted } from 'vue'
import useLoading from '@/hooks/loading'
import dynamicModal from '@/components/modal/dynamicModal.vue';
import { Message } from '@arco-design/web-vue'
import { queryPostList } from '@/api/data-assets/base-assets.ts'
import { useI18n } from 'vue-i18n';
import router from '@/router';
import CustomNode  from './CustomNode.vue'

const props = defineProps(['processData'])
const { loading, setLoading } = useLoading(true);

const { t } = useI18n()

const { nodes, addNodes, updateEdge, removeEdges, getElements, getNode, addEdges, onConnect, dimensions } = useVueFlow()
onConnect((params) => addEdges(params))
const visible = ref(false)
const visible_edit = ref(false)
const title = ref('选择节点操作')
const img_params = ref({})
// const nodeTypes = {
//   custom: markRaw(CustomNode),
// }
let addForm = ref({
  nodeOperations: '',
  postNames:[],
  ccNames:[],
})
let editForm = ref({
  nodeOperations: '',
})
const op2 = [
  { label: '审批', value: '审批' },
  { label: '确认', value: '确认' },
  { label: '处理', value: '处理' },
]
let optionPost = ref([])
// 新增、编辑弹框
const items = reactive([
  
  { field: 'nodeOperations',width:24, label: computed(()=> t('data.departmentCollaboration.columns.process.flow_1')),disabled:true, type: 'radio_comm',option: op2, rules: [{ required: true, message: computed(()=> t('data.departmentCollaboration.columns.process.select')) }], placeholder: computed(()=> t('data.dictory.form.columns.desc.placeholder'))},
  { field: 'postIds', type: 'select', label: computed(()=> t('data.departmentCollaboration.columns.process.flow_2')),multiple:true,fieldNames: { label: 'postName', value: 'postId' }, rules: [{ required: true, message: computed(()=> t('data.departmentCollaboration.columns.process.select')) }],option: optionPost, placeholder: computed(()=> t('data.departmentCollaboration.columns.process.select')) },
  { field: 'ccIds', type: 'select', label: computed(()=> t('data.departmentCollaboration.columns.process.flow_3')),multiple:true,fieldNames: { label: 'postName', value: 'postId' }, rules: [{ required: true, message: computed(()=> t('data.departmentCollaboration.columns.process.select')) }],option: optionPost, placeholder: computed(()=> t('data.departmentCollaboration.columns.process.select')) }

])
// 提交方法
const submit = async(params)=> {
  
  // console.log(params,img_params.value)
  // let ccNames = []
  // params.ccIds.forEach(id=>{
  //   ccNames.push(optionPost.value.filter(i=>i.postId==id)[0].postName)
  // })
  // params.ccNames = ccNames
  // let postNames = []
  // params.postIds.forEach(id=>{
  //   postNames.push(optionPost.value.filter(i=>i.postId==id)[0].postName)
  // })
  // params.postNames = postNames
  try {
    await addRandomNode(params)
    visible.value = false
    Message.success("添加成功")
  } catch (error) {
    console.log(error)
  }
}

// 重置方法
const reset = ()=> {
  addForm.value = {
    remark:undefined
  }
  editForm.value = {
    remark:undefined
  }
}
const close = ()=> {
  visible.value = false
  visible_edit.value = false
  addForm.value = {
    remark:undefined
  }
  editForm.value = {
    remark:undefined
  }
}
function clickadd  (params){
  Message.info("暂无法新增")
  // img_params.value=params
  // console.log("点击",params)
  // visible.value = true
}
const handleEdgeMouseEnter = (edge) => {
  console.log('Mouse entered edge:', edge);
};
// let elements = ref([])
// elements = computed(() => {
//     return JSON.parse(JSON.stringify(props.processData))
//   })
const elements = ref(
  [
  {
    id: '1', type: 'input', position: { x: 400, y: 5 }, label: "发起人",
     data: {
      title: '发起人',
      content: '这是发起人的内容',
      ccIds:[],//抄送人IDs 实际为岗位数组
      postIds:[],//操作人IDs 实际为岗位数组
      postNames:[],
      ccNames:[],
      nodeOperations:"确认",//操作节点
    },
  },
 
  {
    id: '2', type: 'custom',  position: { x: 400, y: 100 }, label: "审批",
    // template: markRaw(OverwriteCustomNode),
    data: {
      ccIds:[],//抄送人IDs 实际为岗位数组
      postIds:[],//操作人IDs 实际为岗位数组
      postNames:[],
      ccNames:[],
      nodeOperations:"审批",//操作节点
    },
  },
  {
    id: '3', type: 'custom',  position: { x: 400, y: 250 }, label: "处理",
    data: {
      ccIds:[],//抄送人IDs 实际为岗位数组
      postIds:[],//操作人IDs 实际为岗位数组
      postNames:[],
      ccNames:[],
      nodeOperations:"处理",//操作节点
    },
  },
  {
    id: '4',type: 'custom',   position: { x: 400, y: 400 }, label: "确认",
    data: {
      ccIds:[],//抄送人IDs 实际为岗位数组
      postIds:[],//操作人IDs 实际为岗位数组
      postNames:[],
      ccNames:[],
      nodeOperations:"确认",//操作节点
    },
  },
  {
    id: '5', type: 'output', position: { x: 400, y: 550 }, label: "完成",
    data: {
      title: '流程结束',
      content: '这是流程结束的内容',
    },
  },

  { id: 'e1-2', source: '1', type: 'smoothstep', label: '＋', target: '2',
    labelBgPadding: [8, 4],
    labelStyle: { fill: '#fff', fontWeight: 700 },
    labelBgBorderRadius: 4,
    labelBgStyle: { fill: '#10b981', color: '#fff', fillOpacity: 1 },},

  { id: 'e2-3', source: '2', type: 'smoothstep', label: '＋', target: '3',
    labelBgPadding: [8, 4],
    labelStyle: { fill: '#fff', fontWeight: 700 },
    labelBgBorderRadius: 4,
    labelBgStyle: { fill: '#10b981', color: '#fff', fillOpacity: 1 },},

  { id: 'e3-4', source: '3', type: 'smoothstep', label: '＋', target: '4',
    labelBgPadding: [8, 4],
    labelStyle: { fill: '#fff', fontWeight: 700 },
    labelBgBorderRadius: 4,
    labelBgStyle: { fill: '#10b981', color: '#fff', fillOpacity: 1 },},

  { id: 'e4-5', source: '4', type: 'smoothstep', label: '＋', target: '5',
    labelBgPadding: [8, 4],
    labelStyle: { fill: '#fff', fontWeight: 700 },
    labelBgBorderRadius: 4,
    labelBgStyle: { fill: '#10b981', color: '#fff', fillOpacity: 1 },},
])
//取父组件的值
//elements.value = props.processData
// console.log(props.processData)
// 修改方法
const submit2 = async(params)=> {
  console.log("params",JSON.stringify(params))
  let ccNames = []
  JSON.parse(JSON.stringify(params.ccIds)).forEach(id=>{
    ccNames.push(optionPost.value.filter(i=>i.postId==id)[0].postName)
  })
  params.ccNames = ccNames
  let postNames = []
  params.postIds.forEach(id=>{
    postNames.push(optionPost.value.filter(i=>i.postId==id)[0].postName)
  })
  params.postNames = postNames

  console.log("params",JSON.stringify(params))
  console.log(elements.value,elements)
  elements.value.forEach(e => {
    if(e.id == img_params.value.node.id){
      // console.log("匹配到了")
      e.data = JSON.parse(JSON.stringify(params))
      e.label = e.data.nodeOperations +"<br/>"+ e.data.postNames
      // console.log(e)
    }
  });
  console.log(elements.value)
  visible_edit.value=false
  // try {
  //   await addRandomNode(params)
  //   visible.value = false
  //   Message.success("添加成功")
  // } catch (error) {
    
  // }
}
const nodeClickHandler = (params) => {
  console.log()
  console.log(JSON.stringify(params.node.data));
  // 如果是发起工单和流程结束，跳过
  if(params.node.label=="发起人" || params.node.label=="完成" ) return
  img_params.value=params
  console.log("点击",params)
  visible_edit.value = true
  editForm.value = params.node.data
};
// addNodes(node1)
// addEdges(edge1)

//新增一个节点
function addRandomNode(params) {
  console.log(img_params)
  //1.新建node，节点位置为(img_params.value.edge.events.sourceX+img_params.value.edge.events.targetX)/2-30,(img_params.value.edge.events.sourceY+img_params.value.edge.events.targetY)/2-15,
  //2.将当前edge线段的target改为新建的nodeid
  //3.新建一个edge线段，source为新建的nodeid，target为原有target，即img_params.value里面的
  //4.将当前新建的node节点以及往后的所有节点的y都新增150
  const nodeId = (nodes.value.length + 1).toString()+'add'
  // console.log(getNode,img_params.value.edge.source)
  // console.log(getNode,img_params.value.edge.source)
  // const source = getNode(img_params.value.edge.source)
  // console.log(source)
  const newNode = {
    id: nodeId,
    label: JSON.parse(JSON.stringify(params.nodeOperations)),
    type:'custom',
    // label: `新增Node: ${nodeId}`,
    position: { x: img_params.value.edge.sourceX-75, y: (img_params.value.edge.sourceY + img_params.value.edge.targetY) / 2 - 15 },
    // position: { x: (img_params.value.edge.sourceX + img_params.value.edge.targetX) / 2 - 30, y: (img_params.value.edge.sourceY + img_params.value.edge.targetY) / 2 - 15 },
    data:JSON.parse(JSON.stringify(params))
    // position: { x: Math.random() * dimensions.value.width, y: Math.random() * dimensions.value.height },
  }
  removeEdges(img_params.value.edge.id)
  const newEdge = {
    id: img_params.value.edge.id,
    source: img_params.value.edge.source,
    type: img_params.value.edge.type,
    label: img_params.value.edge.label,
    target: nodeId,
    updatable: img_params.value.edge.updatable,
    // events: { click: clickadd },
    labelBgPadding: [8, 4],
    labelStyle: { fill: '#fff', fontWeight: 700 },
    labelBgBorderRadius: 4,
    labelBgStyle: { fill: '#10b981', color: '#fff', fillOpacity: 1 },

  }
  const newEdge2 = {
    id: nodeId + 'add',
    source: nodeId,
    type: img_params.value.edge.type,
    label: img_params.value.edge.label,
    target: img_params.value.edge.target,
    updatable: img_params.value.edge.updatable,
    // events: { click: clickadd },
    labelBgPadding: [8, 4],
    labelStyle: { fill: '#fff', fontWeight: 700 },
    labelBgBorderRadius: 4,
    labelBgStyle: { fill: '#10b981', color: '#fff', fillOpacity: 1 },
  }
//   //找到当前指向的下一个节点
//   let index = elements.value.findIndex(item => item.id == img_params.value.edge.target)
//   // console.log(elements.value,img_params.value.edge.target)
//   // console.log(elements.value.findIndex(item => item.id == img_params.value.edge.target))
//   //将节点的y设置
//   for (let i = 0; i > index-1; i++) {
//     let node = elements.value[i]
//     if(isNode(node)){
//       console.log("是node")
//       node.position.y = node.position.y +153
//       // applyChanges(elements.value,{nodes:[node]})
//     }    
//   }
// console.log(elements.value)
  addNodes([newNode])
  addEdges([newEdge])
  addEdges([newEdge2])
}

//新增一个分支
function onEdgeUpdate({ edge, connection }) {
  console.log(edge, connection)
  return updateEdge(edge, connection)
}
const dosomething = ()=>{
  // return getElements.value
  return elements.value
}
onMounted(async() => {
  const a = { page: 1, pageSize: 1000 }
  try {
    const { data } = await queryPostList(a)
    optionPost.value = data.records
  } catch (err) {
    Message.error(err.message)
  }
})
watch(visible_edit, (newValue) => {
  // console.log(elements.value)
  if (!newValue) {
  // console.log("修改？？",newValue)
    // 可以在这里执行重新渲染操作
    elements.value = [...elements.value];
  // console.log("修elements改？？",elements.value)
  }
});
defineExpose({
  dosomething
})
</script>
 
<style>
/* these are necessary styles for vue flow */
@import "@vue-flow/core/dist/style.css";

/* this contains the default theme, these are optional styles */
@import "@vue-flow/core/dist/theme-default.css";

.custom-node {
  background-color: #f2f2f2;
  border: 1px solid #ccc;
  padding: 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.node-title {
  font-weight: bold;
}

.node-content {
  margin-top: 4px;
}</style>
温暖的松子
关注
  • 1
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 9
    评论
专栏目录
vue-dataflow-editor-Vue2数据流图编辑器-Vue.js开发
05-27
vue-dataflow-editor嗨，您可以使用https://github.com/jagenjo/litegraph.js。 基于vue块。 @ghostiam的项目。 npm npm我@ krthr / vue-dataflo vue-dataflow-editor嘿，您可以使用https://github.com/jagenjo/litegraph.js。 基于vue块。 @ghostiam的项目。 npm npm i @ krthr / vue-dataflow-editor导入app.js上的库// // app.js或main.js，或主文件//在其中创建vue应用程序从“ vue”导入Vue； //其他导入会导入“ @ krthr / vue-dataflow-editor”； 导入“ @ krthr / vue-dataflow-editor / dist / vue-dataflow-editor.css”； const app = new Vue（{/ * ... * /}）;
基于Vue3+ts+AntV X6实现的流程图编辑器
10-17
基于Vue3+ts+element-plus+AntV X6实现的流程图编辑器，框架核心功能已经搭好，组态化呈现，自定义节点、属性绑定、样式调整等，采用pinia统一管理各个属性，根据自己需求在此基础上自定义调整修改添加等，最终可导出json数据加以回显
vue-flowchart:vue原理图
05-08
ÿ ÿ 构建设置 # install dependencies npm install # serve with hot reload at localhost:8080 npm run dev # build for production with minification npm run build # build for production and view the bundle analyzer report npm run build --report 有关工作原理的详细说明，请查看的和。
Vue Flow 是一个基于 Vue.js 和 D3.js 的可视化图表库，可以用于构建各种类型的流程图、组织结构图、网络拓扑图等。...
gitblog_00100的博客
03-23 356
Vue Flow 是一个基于 Vue.js 和 D3.js 的可视化图表库，可以用于构建各种类型的流程图、组织结构图、网络拓扑图等。 项目地址:https://gitcode.com/bcakmakoglu/vue-flow 技术分析 Vue Flow 使用了 Vue.js 的组件化思想，将图表分解成多个小组件，使得图表的构建和维护更加简单。同时，Vue Flow 还使用了 D3.js 的数据驱动...
vue3+antv x6+tsx 制作自定义流程图
09-23
1.使用vue3+antv x6+tsx制作自定义流程图 2.实现自定义拖拉组件。 3.支持自定义拓展。
vue3流程图组件vue flow使用
qq_26622469的博客
05-24 4303
vue3流程图组件、vue flow、typescript。
使用流程图插件 vue-super-flow 制作文字拖拽填充效果
sinat_35272898的博客
06-10 6604
vue项目在 html 中加载流程图，使用 vue-super-flow 工具，实现拖拽替换功能
vue-flow-topology:Flow Topology 是基于Vue-cli3.0 + Ant Design Vue + JSPlumb开发的一个大数据流水线拓展流程工作台，该项目可以看做是一个独立的 Vue 项目，也可以嵌入到其他vue项目中使用，新版会作为优先版本持续迭代
05-07
vue-flow-topology 介绍 vue-flow-topology 该项目可以看做是一个独立的 Vue 项目（大数据流水线拓展流程工作台），也可以嵌入到其他vue项目中使用，新版会作为优先版本持续迭代。 版本一：基于 Vue-cli3.0 + view-design + JSPlumb 开发（ master 分支 ）。 版本二：基于 Vue-cli3.0 + Ant Design Vue + JSPlumb 开发（ simple 分支 ）。 特性 :check_mark_button: 支持画布重绘、拖拽、放大、缩小功能 :check_mark_button: 支持鼠标滚轮缩放画布功能 :check_mark_button: 支持拖拽、添加、删除节点功能 :check_mark_button: 支持不同连线类型进行关联节点功能 :check_mark_button: 支持删除连线、重绘连线功能 :check_mark_button: 支持点击画布设置属性功能 :check_mark_button: 支持点击节点设置属性功能 :check_mark_button: 支持点击线进
Vue底层原理
edwardwzw的博客
02-11 3794
Observer （数据劫持） 核心是通过Obeject.defineProperty()来监听数据的变动，这个函数内部可以定义setter和getter。 每当数据发生变化，就会触发setter()。这时候 Observer 就要通过 Dep 通知 Watcher 订阅者。 Dep （发布者） 有 addWatcher() 和 notify() 两个方法，（收集 Watcher 依赖，并通知依赖变更）。 Dep 保存多个 Watcher，当 Dep 发现 Observer有更新时，Dep ...
前端流程图插件对比选型，这一篇就够了
LuckyWinty的博客
10-09 2815
点击上方前端Q，关注公众号回复加群，加入前端Q技术交流群前言大家好，我是winty～Snipaste_2023-07-04_15-49-12.png前端领域有多种流程库可供选择，包括但不限于vue-flow、butterfly、JointJS、AntV G6、jsPlumb和Flowchart.js。这些库都提供了用于创建流程图、图形编辑和交互的功能。然而，它们在特性、易用性和生态系统方面存在一...
vueFlow 流程图组件
StevenYanghahha的博客
04-24 1999
vue实现流程图
vue3+vite+ts 仿淘宝放大镜效果
09-17
1.本demo是一个类似于淘宝放大镜的效果。 2.使用vue3+vite搭建 3.实现了图片点击轮播和移入放大的效果 4.下载下来可直接使用，必须真实 有问题可以直接提问
vue3+ts+vuerouter+pinia+elementplus+ts环境模板搭建及vite打包优化
05-12
vue3+ts+vuerouter+pinia+elementplus+ts环境模板搭建及vite打包优化vue3+ts+vuerouter+pinia+elementplus+ts环境模板搭建及vite打包优化vue3+ts+vuerouter+pinia+elementplus+ts环境模板搭建及vite打包优化vue3+ts+...
vue3+vite+ts+antv/x6搭建的流程图编辑页面
03-20
同时，还提供了一个拖拽组件栏，用户只需简单拖拽，即可将所需的组件添加到流程图中。 除了节点的编辑，我们还为用户提供了一个属性配置栏。在这个栏目中，用户可以详细配置每个节点的属性，如名称等，使得流程图...
Django框架之请求生命周期流程图
Xiao20000101的博客
04-29 382
WSGI是协议，小写的wsgiref和uwsgi是实现该协议的功能模块提前已经将你想要的数据准备好了，需要的时候直接拿就可以，提高了效率和响应时间。eg:当你在修改你的数据的时候，你会发现数据并不是立刻修改完成的，而是需要经过一段时间才会修改。
《前端面试题》- TypeScript - TypeScript的优/缺点
小张微说的博客
04-22 2721
问题 简述TypeScript的优/缺点 答案 优点 增强了代码的可读性和可维护性 包容性，js可以直接改成ts，ts编译报错也可以生成js文件，兼容第三方库，即使不是ts编写的 社区活跃，完全支持es6 缺点 增加学习成本 增加开发成本，因为增加了类型定义 需要编译，类型检查会增加编译时长，语法和类型系统复杂的话时间特别特别长 eval和new Function()这种操作类型系统管不到 ...
前端Mock的使用，用于构造动态数据
最新发布
04-29
适用于前端开发，前端构建动态数据
SQL语句的基本用法案例.pdf
04-29
“SQL语句的基本用法案例”的文档，是一份非常实用的学习资料，为初学者和进阶者提供了丰富的SQL操作示例。通过这份文档，读者可以系统地了解SQL语言在数据库管理中的应用，掌握从创建数据库到删除数据库的整个流程。 文档开篇便介绍了如何创建一个新的数据库，并详细说明了选择数据库、创建表以及插入数据的具体步骤。这不仅为读者展示了SQL语句的基础用法，也为后续的查询、更新和删除操作打下了坚实的基础。 在查询数据部分，文档通过多个示例展示了SQL查询的灵活性和强大功能。无论是查询所有学生信息，还是根据特定条件筛选数据，都能通过简单的SQL语句实现。此外，文档还介绍了如何计算学生的总数、平均年龄等统计信息，以及如何对数据进行排序和限制结果。 除了基础的增删改查操作，文档还深入介绍了子查询、连接表以及窗口函数等高级用法。这些功能在实际应用中非常常见，能够帮助用户解决更为复杂的数据处理问题。 此外，文档还提供了清晰的代码示例和注释，使得读者能够轻松理解每个步骤的含义和目的。同时，文档的语言简洁明了，逻辑清晰，使得学习过程更加轻松愉快。
vue +d3绘制流程图
09-18
Vue.js是一个基于JavaScript的开源框架，用于构建用户界面。而D3.js是一个用于在网页上创建可交互数据可视化的JavaScript库。结合Vue.js和D3.js可以很方便地绘制流程图。 首先，我们需要在Vue.js项目中安装D3.js，可以通过npm安装。在终端中运行以下命令： npm install d3 安装完成后，在Vue.js组件中引入D3.js库： import * as d3 from 'd3'; 接下来，我们可以在Vue.js组件的生命周期函数中创建一个D3.js绘制流程图的函数。比如，在mounted钩子函数中： mounted() { this.drawFlowChart(); } 然后，在drawFlowChart函数中，我们可以使用D3.js提供的方法和API来绘制流程图。这个过程可以分为以下几步： 1. 创建svg元素，用于承载流程图的绘制： const svg = d3.select('body') .append('svg') .attr('width', '100%') .attr('height', '100%'); 2. 定义绘制流程图所需的数据，比如节点和连接线的位置和样式信息： const nodes = [ { id: 1, name: 'Node 1' }, { id: 2, name: 'Node 2' }, { id: 3, name: 'Node 3' }, // ... ]; const links = [ { source: 1, target: 2 }, { source: 2, target: 3 }, // ... ]; 3. 创建节点和连接线的元素，并设置其位置和样式： const node = svg.selectAll('.node') .data(nodes) .enter() .append('g') .attr('class', 'node') .attr('transform', d => `translate(${d.x}, ${d.y})`); node.append('rect') .attr('width', 100) .attr('height', 50); const link = svg.selectAll('.link') .data(links) .enter() .append('line') .attr('class', 'link') .attr('x1', d => d.source.x) .attr('y1', d => d.source.y) .attr('x2', d => d.target.x) .attr('y2', d => d.target.y); 4. 可以根据需要添加交互功能，比如节点的点击事件、鼠标悬停效果等等。 至此，我们使用Vue.js和D3.js成功绘制了一个流程图。通过Vue.js的数据绑定和D3.js的数据驱动视图的特性，可以很方便地更新流程图的数据和样式，实现交互和动态效果。同时，D3.js也提供了丰富的API可以用于进行复杂的数据可视化操作，比如节点之间的动画过渡效果、缩放和拖拽等等。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 9
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值