d3 svg path添加文本_svg演示kafka的broker和zookeeper动态交互
根据《开发动画演示系统-计划和架构》中我第一步需要实现一个web前端来动态演示分布式系统。今天已经可以展示简单的动画了。哈哈
![](/assets/blank.gif)
该动画还很初级,只是演示了kafka的broker在启动的时候,先要想zookeeper注册一个id。kafka用zookeeper来管理kafka集群的所有broker。后面我将继续完善和丰富这个动画。还要加上交互效果。本文分享一下这个动画的制作过程。
准备环境
需要启动一个http server。用nodejs非常方便。
用npm安装一个简单的http server:
npm install -g http-server
准备一个项目目录, 并启动http-server
mkdir kafkacd kafkahttp-server
现在这个kafka目录就是web站点的根目录了。可以打开:
http://localhost:8080/
准备项目结构
![](/assets/blank.gif)
安装js库
npm install @svgdotjs/svg.js @svgdotjs/svg.draggable.js jquery
svgjs 就是我用来绘制svg动画的,draggable是它的一个插件,可以实现拖拽。运行之后就会把js类库安装在node_modules下面了。就可以在html里面引用了。jquery大家都知道,不可或缺。
开始写页面
一开始先画出效果再说,后面在慢慢重构。先引入js,可以从node_modules直接引入,很方便。
写js入口函数
SVG.on(document, 'DOMContentLoaded', function () { // 定义svg对象, 在body里面添加一个svg let svg = SVG().addTo('body').attr({width: 1000, height: 800}); $.getJSON("data/brokers.json?"+version, function (data) { data.forEach(node => createNode(svg, node)) }); }
这里调用了一个函数createNode,后面讲。我把节点的数据信息放到json文件里面,然后用数据驱动的方式画图。这样做的好处是:我可以用python在后端用算法生成svg的动画数据,一来我喜欢用python,二来这样比较高效。第一步我先mock一下,等数据模型差不多稳定了我再写后台生成算法。
数据模型设计
下面是broker节点的定义:
[ { "group": { "id": "broker1", "transform": { "translateX": 100, "translateY": 200 } }, "shape": { "type": "rect", "attributes": { "x": 10, "y": 10 } }, "label": { "text": "broker1", "attributes": { "x": 24, "y": 8 } } }, ...]
我按照svg的结构来定义数据节点,方便编程和理解,这也是基于领域模型驱动的设计(domain driven design)的一个重要思想。
绘制节点函数
function createNode(container, data) { // 用一个group把节点边框和文本放在一起,这样可以利用group的transform来定义 // 整个group里面所有节点的坐标位置 let group = container.group() .transform({translateX: data.group.transform.translateX, translateY: data.group.transform.translateY}) .id(data.group.id); // TODO style 的信息暂时hardcode, 后面会用程序控制动态变化的效果。 let style = {fill: 'none', stroke: 'blue'}; let attributes = {...style, ...data.shape.attributes}; // 动态的调用函数,可以支持绘制各种图形,比如:rect, ellipse let rect = container[data.shape.type](data.group.id.length * 11, 28).attr(attributes); group.add(rect); let label = container.text(data.label.text); label.attr(data.label.attributes); group.add(label); return group.draggable(); // 支持拖拽 }
绘制连线
let marker = svg.marker(13, 13, function (add) { add.path('M2,2 L2,11 L10,6 L2,2').fill('blue').stroke({width: 1, color: 'blue'}) }).attr({"refX": "2", "refY": "6", "orient": "auto"}); function createPath(container, data, marker) { container.path(data.data).id(data.id) .fill('blue') .stroke({width: 1, color: 'blue'}) .marker('end', marker); }
箭头的绘制花了我很多时间,最后还是找到了方法。这里svg有个神奇的地方是箭头的方向可以根据线的方向自动调整。就是"orient": "auto"。
let marker = svg.marker(13, 13, function (add) { add.path('M2,2 L2,11 L10,6 L2,2').fill('blue').stroke({width: 1, color: 'blue'}) }).attr({"refX": "2", "refY": "6", "orient": "auto"});
绘制动画
let circle1 = svg.circle(20).attr({cx: 200, cy:230}).fill('green').animate(2000, 100, 'now').move(380, 300);
svg画动画真的很简单,一句话就可以搞定,哈哈。
总结
svg很强大也很方便,值得学习。利用svgjs的attr()函数,我可以直接把节点数据json里面的内容灌入svg节点,方便我做数据驱动的编程。
文字不太容易表达得很细致,我后面会录一期视频详细讲解一下。全部的代码可以在我的github里面下载:
https://github.com/jacky-calm/visualize-the-idea
感兴趣的小伙伴,可以评论和转发,也欢迎给我的github提pr和建议。
d3 svg path添加文本_svg演示kafka的broker和zookeeper动态交互相关推荐
- d3 svg path添加文本_数据可视化——D3展现数据最炫丽的一面
热情的或--有温度的"1" 大家好,大家肯定很好奇,数据能是什么样子嘛,不就是干巴巴的1.2.3-!哟,这个火热的"1"好像是挺绚丽的啊,但对不起,这只是数字, ...
- d3 svg path添加文本_10 倍高清不花!大麦端选座 SVG 渲染
作者 | 阿里文娱无线开发专家 波涛 责编 | 夕颜 出品 | CSDN(ID:CSDNnews) 背景介绍 用户在大麦上购票,需要自行选座.在大型场馆下,如何让 10 万+座位绘制达到闪开?这需要技 ...
- d3 svg path添加文本_D3.js 力导向图的显示优化
D3.js 作为一个前端,说到可视化除了听过 D3.js 的大名,常见的可视化库还有 ECharts.Chart.js,这两个库功能也很强大,但是有一个共同特点是封装层次高,留给开发者可设计和控制的部 ...
- 再见!Kafka决定弃用Zookeeper...
最近,confluent社区发表了一篇文章,主要讲述了Kafka未来的2.8版本将要放弃Zookeeper,这对于Kafka用户来说,是一个重要的改进.之前部署Kafka就必须得部署Zookeeper ...
- SVG PATH d参数的 ace
SVG PATH 的d参数较多,也比较复杂. Moveto Lineto Curveto Arcto ClosePath 这里只打算记录下 Arcto 参数.(https://developer.mo ...
- python可视化添加文本_python Matplotlib基础--如何添加文本和标注
创建一个优秀的可视化图表的关键在于引导读者,让他们能理解图表所讲述的故事.在一些情况下,这个故事可以通过纯图像的方式表达,不需要额外添加文字,但是在另外一些情况中,图表需要文字的提示和标签才能将故事讲 ...
- java svg 读取dom结构_SVG基础以及使用Javascript DOM操作SVG
SVG 不依赖分辨率 支持事件处理器 最适合带有大型渲染区域的应用程序(比如谷歌地图) 复杂度高会减慢渲染速度(任何过度使用 DOM 的应用都不快) 不适合游戏应用 Canvas 依赖分辨率 不支持事 ...
- java中添加文本框_Java 添加、删除Word文档中的文本框
在Word文档中,文本框是指一种可移动.可调大小的文字或图形容器.使用文本框,能够使文档在内容和形式上更为饱满.本文将通过使用Java编程来演示如何添加.删除Word文档中的文本框. Jar文件获取及 ...
- R语言ggplot2在可视化图像中添加横线并在横线中添加文本、为横线中添加的文本添加文本框、自定义文本框的填充色(background color for a text annotation)
R语言ggplot2在可视化图像中添加横线并在横线中添加文本.为横线中添加的文本添加文本框.自定义文本框的填充色(background color for a text annotation) 目录
- R语言ggplot2包和ggtext包在可视化图像中的指定位置添加文本框(横向文本框、竖向文本框)
R语言ggplot2包和ggtext包在可视化图像中的指定位置添加文本框(横向文本框.竖向文本框) 目录
最新文章
- linux ubuntu安装 mono,在Ubuntu 18.04系统中安装Mono及基本使用Mono的方法
- IIS目录禁止执行权限
- c_str()和strcasecmp
- REdis AOF文件结构分析
- web前端入门学习 css(7)css高级技巧 (精灵图、字体图标、css三角、鼠标样式、表单轮廓线、文本框拖拽、垂直对齐、图底空白缝隙、margin负值、溢出文字省略号、文字环绕、css初始化)
- 普通人为什么要学习Python
- 软帝java培训实习日志,在软帝学习的第一个星期的小总结
- System.ConfigurationManager类用于对配置文件的读取
- win10照片查看器不能点下一张的方法
- 论文查重率【降重】从65%-25%的心路历程!超硬核!霸道降重!
- 期末知识点复习——概率论与数理统计(5)
- HTML+CSS静态页面网页设计作业——甜品奶茶店(19页) HTML5网页设计成品_学生DW静态网页设计_web课程设计网页制作
- 集线器、交换机和路由器
- Unbuntu下U盘突然权限只读,无法重命名和复制粘贴文件的问题修复
- webrtc视频卡顿分析一本地视频卡顿
- 访客统计php代码转换图片,PHP实现简单网站访客统计的方法实例
- 云上印尼:“数”影婆娑的千岛之国
- 简洁安装HIT-SCIR(哈工大) pyltp
- Java开发人员必须掌握的Linux命令(二)
- 超简单的页面(图片、文字、布局。。。)等比缩放