前端用JS + SVG 实现关系图谱 流程图
重要需掌握，画线，矩形、圆
画线：<line x1="521" y1="108" x2="521" y2="145" stroke="black" stroke-width="2" marker-start="url(#ClearTriangleL)">></line>
矩形：<rect x="408" y="8" width="254" height="43" fill="white" stroke="#ccc" stroke-width="1"></rect>
圆：<circle cx="520" cy="88" r="20" fill="white" stroke="black" stroke-width="2"></circle>
代码如下：
<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="700">
<g>
<title>关系图</title>
<rect fill="#fff" id="canvas_background" height="791" width="1614" y="-1" x="-1"/>
<g display="none" overflow="visible" y="0" x="0" height="100%" width="100%" id="canvasGrid">
<rect fill="url(#gridpattern)" stroke-width="0" y="0" x="0" height="100%" width="100%" id="svg_21"/>
</g>
</g>
<g>
<title>关系图谱实现</title>
<!-- 定义形状 -->
<defs id="SctDiagramsDefs">
<!--黑实心剪头-->
<marker id="BlackTriangle" refX="0" refY="10" markerWidth="8" markerHeight="6" orient="auto" viewBox="0 0 22 20" markerUnits="strokeWidth" fill="black" stroke="black" stroke-width="2">
<path d="M 0 0 L 20 10 L 0 20 z"></path>
</marker>
<!--实心剪头左方向-->
<marker id="BlackTriangleL" refX="0" refY="10" markerWidth="8" markerHeight="6" orient="auto" viewBox="0 0 22 20" markerUnits="strokeWidth" fill="black" stroke="black" stroke-width="2">
<path d="M 0 10 L 20 0 L 20 20 z"></path>
</marker>
<!--空心剪头-->
<marker id="ClearTriangle" refX="0" refY="10" markerWidth="8" markerHeight="8" orient="auto" viewBox="0 0 22 20" markerUnits="strokeWidth" fill="white" stroke="black" stroke-width="2">
<path d="M 0 0 L 20 10 L 0 20 z"></path>
</marker>
<!--空心剪头左方向-->
<marker id="ClearTriangleL" refX="0" refY="10" markerWidth="8" markerHeight="8" orient="auto" viewBox="0 0 22 20" markerUnits="strokeWidth" fill="white" stroke="black" stroke-width="2">
<path d="M 0 10 L 20 0 L 20 20 z"></path>
</marker>
<!--线-->
<marker id="LineMarker" refX="0" refY="10" markerWidth="8" markerHeight="8" orient="auto" viewBox="0 0 22 20" markerUnits="strokeWidth" fill="white" stroke="black" stroke-width="2">
<path d="M 0 10 L 20 10">
</path>
</marker>
</defs>
<!-- 父级元素 -->
<a @click="zx()">
<rect x="408" y="8" width="254" height="43" fill="white" stroke="#ccc" stroke-width="1"></rect>
<rect x="410" y="10" width="250" height="39" id="rect39" fill="#5470c6" stroke="#ccc" stroke-width="1" ></rect><!--v-for="(item,index) in list" :key="index"-->
<text x="420" y="26" font-family=""Helvetica Neue",Helvetica,Arial,sans-serif" font-size="14" fill="black">传统医学疾病{{ index }}</text>
<text x="420" y="41" font-family=""Helvetica Neue",Helvetica,Arial,sans-serif" font-size="12" fill="black">ID：313308</text>
<line x1="521" y1="50" x2="521" y2="80" stroke="black" stroke-width="4"></line>
<line x1="521" y1="108" x2="521" y2="145" stroke="black" stroke-width="2" marker-start="url(#ClearTriangleL)">></line>
<circle cx="520" cy="88" r="20" fill="white" stroke="black" stroke-width="2"></circle>
<text x="508" y="90" font-family=""Helvetica Neue",Helvetica,Arial,sans-serif" font-size="12" fill="black">父级</text>
</a>
<!-- 当前元素 -->
<rect x="408" y="138" width="254" height="43" fill="white" stroke="#ccc" stroke-width="1"></rect>
<rect x="410" y="140" width="250" height="39" id="rect39" fill="#91cb74" stroke="#ccc" stroke-width="1"></rect>
<text x="420" y="156" font-family=""Helvetica Neue",Helvetica,Arial,sans-serif" font-size="14" fill="black">脏腑系统疾病</text>
<text x="420" y="171" font-family=""Helvetica Neue",Helvetica,Arial,sans-serif" font-size="12" fill="black">ID：313309</text>
</svg>
后续还会补充动态获取数据
前端用JS + SVG 实现关系图谱 流程图相关推荐
- D3.js实现人物关系图谱有移动、拖拽、放大功能
原文链接:https://www.jianshu.com/p/d768505cab78 在此基础上加了点东西 实现了关系图的移动.拖拽.放大功能.以及数据的分类等等.代码稍显繁琐,另外案例中的d3.j ...
- InteractiveGraph 实现酷炫关系图谱之前瞻
本文代码和数据等,会等下一篇实战文章更新后一起放在 github/DesertsX 上,敬请期待! 前言 话说之前片刻老哥(群主/组织负责人之一)在 ApacheCN 中文开源组织 的机器学习群(qq ...
- [知识图谱实战篇] 七.HTML+D3实现关系图谱搜索功能
前面作者讲解了很多知识图谱原理知识,包括知识图谱相关技术.Neo4j绘制关系图谱等,但仍缺少一个系统全面的实例.为了加深自己对知识图谱构建的认识,为后续创建贵州旅游知识图谱打下基础,作者深入学习了张宏 ...
- 部署明星关系图谱那些事儿（GitHub Pages）
时光飞逝,距离发布上一篇文章 InteractiveGraph 实现酷炫关系图谱之前瞻 已经过去了近两个月,嘴上说着会马上把实战"娱乐圈明星关系图谱"的代码开源到 github/D ...
- ECharts 实现人民的名义关系图谱 代码开源
1.什么是ECharts ECharts是百度开源的纯 Javascript 图表库,目前开源可以与highcharts相匹敌的一个图表库,相信有很多国内用户使用. 官网 http://echarts ...
- js 点击闭包_【新年跳槽必备】2020最新（前端原生JS专题）面试题 速领！
最近我把每周更新的面试题 发在我们的学习群里 大家似乎都很高冷哇 难道是默默的做题去了没说话 每期面试题都是Richard老师认真准备的 真的希望能帮到大家哦 本期是前端原生JS专题 A前端原生JS专 ...
- web前端培训JS 运行机制的梳理
展现形式:由于是属于系统梳理型,就没有由浅入深了,而是从头到尾的梳理知识体系, 重点是将关键节点的知识点串联起来,而不是仅仅剖析某一部分知识. 内容是:从浏览器进程,再到浏览器内核运行,再到JS引擎单 ...
- 从零开始学前端 - 16. JS对象Object介绍及常用方法
作者: 她不美却常驻我心 博客地址: https://blog.csdn.net/qq_39506551 微信公众号:老王的前端分享 每篇文章纯属个人经验观点,如有错误疏漏欢迎指正.转载请附带作者信息 ...
- 基于python-django的neo4j人民的名义关系图谱查询系统
简介 这个系统主要是基于neo4j的关系图谱联系使用 里面的关系是在网上找的数据文件,主要是人民的名义对应关系 首先是吧数据对应的节点和关系写入的neo4j里面 然后使用django编写了一个web服 ...
- 前端面试 - JS总结（1） - 基础 (数据类型, 事件与函数, 原型链)
你不走出舒适圈,又怎么知道自己多坚强?! 前端面试 - JS总结(1) - 基础 (数据类型, 事件与函数, 原型链) 前端面试 - JS总结(2) - ES6 (let, 箭头函数, this) 前 ...
最新文章
- 制作Python的安装模块
- poj 2528 Mayor's posters (线段树+离散化)
- 解决svn错误：post-commit hook failed (exit code 1) with output
- 进行有效编辑的七种习惯
- python缩进tab还是空格_Python码农有话说：写代码时应该缩进使用 tab还是空格？...
- C++socket编程（七）：7.3 http的响应协议
- 【知乎】神回答，我们吐的不是槽 233
- 2.高性能MySQL --- MySQL 基准测试
- JS 使用正则表达式参考，分组捕获，遍历输出所有匹配结果
- 【C++】算法集锦（11）：敏感词过滤算法（DFA）
- win7 用 Activation激活 重启 进入 Acer eRecovery Management 解决办法
- 分享 Android 识音识别 挺有想法的。
- 如何把pdf转换成word文档？
- Excel中的透视表和vlookup的用法简单讲解
- matlab modis sst,MATLAB 处理 MODIS 数据（MOD04_L2）
- 如何修改 SQL Server 中的实例名 ？
- 2021李宏毅机器学习笔记--12 attack ML models
- 年薪80万+年终奖汽车|显扬科技招聘三维机器视觉研发总监、高级三维算法工程师...
- （摘录）MD5算法研究与破解
- Artical Analysis (AA): R-FCN: Object Detection via Region-based Fully Convolutional Networks
热门文章
- 论文解读|BMVC 2019|DABNet: Depth-wise Asymmetric Bottleneck for Real-time Semantic Segmentation
- 100个穷二代，每人100元，60岁前谁能翻盘？
- [CA-1]存储器(Caches)
- ARMv8-A编程指导之Caches（1）
- Nginx学习笔记（七）——配置Nginx实现Gzip网页压缩、图片压缩
- iPad忘记密码时恢复出厂设置
- 赛狐ERP「价格利润试算」——精准定价 保证利润最大化
- 增强版唐奇安通道策略
- webpack之HTML、css和js代码压缩
- 华为员工吐槽加班太多，晒出7天上班打卡记录网友：不怕猝死吗？