最近写一个行业关系图的组件，写的时候我是直接拆分为几个JS文件，然后在html页面中引入这几个文件，没有采用模块化的方法。开发到后期时，准备处理打包相关的事情了，然后就得将这些程序转为模块化的形式。这个过程耗费了我不少时间，因此这里记录下，用于今后参考。 全局数据模块前端开发是数据驱动的工种，因此务必先处理数据。 考虑到组件一般都会有数据、配置等信息，而这些信息是需要在不同模块之间传递的，因此首先

基础支撑类金融概念名词的可视化解读类似句子结构中的名词，我们现在的数据新闻就包含了这部分内容，比如之前做的CPI、PPI解读。目前的问题是还未形成可通用的方案，无法快速扩展。 金融概念的可视化形象设计这也是句子结构中的名词，比如股票、股权、债券、金钱等。区别于上面的名词，这里的名词一般是用户可理解的，这部分的重点是将这些名词设计为图形化的形象 金融关系、动作的可视化设计类似句子结构中的动词，比如交

结构化思维（Structured Thinking）是指一个人在面对工作任务或者难题时能从多个侧面进行思考，深刻分析导致问题出现的原因，系统制定行动方案，并采取恰当的手段使工作得以高效率开展，取得高绩效。 上面这段话是从百度百科找来的定义。 把你的想法和思维内容，像整理衣服一样，分门别类的安放好，组成一个结构分明的整体，方便日后的理解、存储、使用。 上面这一段，来自一位知乎用户。 我们工作

有东西被加密了, 请输入密码查看.

最近做了一个动画，用于 PC 端的并购重组网页，展示并购重组的过程。今天给 Boss 看了下，结果比较悲剧，被称为是看过的世界上倒数第二烂的设计…… 就是上面这货了。 因此我反思了下这个失败的原因。 问题解决用户什么问题？每个好的产品、好的可视化，一定都是能解决用户某个具体问题、能满足用户需求的。而我们这个动画初衷是解决并购重组难以理解的这个问题，但是很显然，没有达到这个目的。 这里其实有

图比文字好，直接上图吧： 以前看的时候没什么感触，刚才重新翻出来看了一遍，结合最近的实践，发现真的是处处命中。这些方法理论性的内容，不经过真实的项目实践，是无法真正领会的。

踩过的坑在之前的笔记《D3Charts-给legend实现动画分页效果》中，已经提过了自己了解项目时踩过的一些坑： 没理解数据结构比如Group，之前都忽略了，直接导致方案设计有误，试图控制每一个LegendItem去实现动画。 没有理清楚类的继承关系和调用流程在代码中绕来绕去，花了很久。最后自己画了一个关系图，瞬间就清晰了好多。 调试手段低效一开始没有采用debugger，直接在代码里面埋点，

这是给 Boss 用的查看部门组织结构的人员关系图，是基于 vis.js 进行的二次开发。 可以在入口加个 debugger，按照程序流程先跑一遍，有个大致了解。 思考：能否用关系图来展示程序设计？ 用到的技术vis.js：用于关系图的作图 Vue：左侧编辑区域的表单 babel：转换代码 webpack：打包 ivew：样式 程序设计文件结构src/index.js 已经没有用到了

我的笔记本内存是8G，之前一直都没有什么问题，但是最近经常出现内存不足的情况，浏览器开着开着就崩溃了。查看进程，也没有发现有什么占用内存出现异常的进程。 考虑到我的用户进程一般占用的内存只有2G左右，肯定是系统哪里出现了异常，准备好好排查下。 系统进程查看耗费内存超过100M的进程： 123456789101112131415161718$ tasklist /FI "MEMUSAGE

关系图在辅助决策方面，真的大有可为。 构建自己的各种类型的模板。 待阅读的文章： 一文教你高效画出技术架构图 工具选择Office的PPT在画图时其实是很强大的，这个已经能够满足常规需求了，因此直接选择PPT作为画图工具即可。 而且考虑到有时候需要在其他人的电脑上修改架构图，大家基本上都有安装PPT，这也是一个优势。 如果想用在线版的工具，也可以考虑这个作图网站：draw.io. 虽然画出来的