居中我之前一直都是自己通过计算文本的字符长度以及字体的大小，再根据文本对应的元素的 x、y 信息来计算最终文本的位置，走了很多弯路。 其实 D3 的 Text 标签自带的text-anchor属性就可以实现了， 弧形文字类似这样的效果： 可以通过textPath实现，通过 path 确定位置。 123456789101112131415161718192021<svg xmlns=&qu

环境配置babelhttps://segmentfault.com/a/1190000018461758 babel默认有些新的ES特性是不支持的(比如Null传导运算符?.)，会导致编译的时候报错：Unexpected token。 因此需要额外安装@babel/preset-env，并在.babelrc中配置一下： 12345{ "presets":

数据结构D3 画的 SVG 坐标轴的 HTML 结构如下： 123456789101112131415161718192021222324252627282930313233<g transform="translate(20, 300)" class="myXaxis" fill="none" font-size=&quo

最近做的一个项目，线上时不时会出点问题，而组内就我一个人会后端，其他组员都是前端人员，出现线上问题后就只能我自己排查。因此我准备整理下线上问题的一些排查流程和方法，让大家都能处理类似的问题。 ELKgraph LR A("Logstash-数据的收集、处理和转发") -->B("Elasticsearch-存储、搜索和分析") -->C(Kiba

Egg 的日志问题原因与解决方案如何分析与排查线上问题详见如何排查线上问题 D3 实现动态折线图TypeScript 与 D3 结合使用的感触animatejs可视化搭建HTML 元素的 dragable 属性 e.dataTransfer.setData() @dragover：拖动时的图标 @drop.prevent 用一个数组存放画布里面的组件，方便后面渲染配置项 组件配置项的设计通过 CS

资料一个开源的头像转虚拟形象： https://github.com/alievk/avatarify 生成表情动画： https://github.com/AliaksandrSiarohin/first-order-model

http://jira002.iwencai.com:8080/browse/DATAV-2055 时间计划：10 月内上线10.23 提供折线图组件给 Ifind 需求：1、动态折线图https://flourish.studio/2019/07/15/line-chart-race/曲线圆角阴影渐变时间点 TIPY 轴自动伸缩 一种方案是直接画好整个 path，然后遮住一部分，横向平移http

这里只针对能够和我平时的工作结合起来的内容。 排行榜比如个股、行业涨跌幅。 可以用折线图、柱状图、散点图、甚至关系图也可以。 直接把 3D 关系图用上去，加上颜色突出、大小、镜头旋转、线条高亮等等，炫酷得不行。 关系演变这个也可以用散点图和关系图。 知识图谱这个，一个概念就可以出一个视频了，素材很多的。 金融播报这个在技术上没有什么新东西，只是各种成熟技术(动态网页+截屏+拼接视频+文本转语音+合

最近让一个同事将项目开发中的功能抽取为组件，他遇到了一个问题，就是不知道该怎么抽取。因此我跟他讨论了好几次，这里将最终的一个组件抽取的分层思路记录一下。 绘图层这一层做基础的绘图元素的封装，比如画节点、连线、箭头、文本标签，以及一些通用交互，比如连线跟随节点的移动而移动。 然后暴露通用的事件处理。 本层面向的用户是我们可视化内部的开发人员，目的是降低我们自己的开发成本。 插件层这一层主要用于实

利用JavaScript的对象引用传递的这个特性，可以很好的实现【数据驱动】的理念。 大致逻辑就是：修改数据->调用render函数 如果想要做得更自动化一点，可以加入观察者模式，通过Object.defineProperty自动监测属性的变化，自动调用render方法，这样你只需关注数据的增删改查即可。 注意数据必须是对象，不能是基本数据类型。 给被拖拽的元素设置id属性比如我是将circ