[D3] 初识D3.js

Posted 2023-04-28

参考技术A 调研了一下知识图谱的前端显示方案。最简单的就是直接用Echarts等封装好的关系图来绘制，但难以个性化的设定。所以打算用更加接近底层的D3.js来做前端展示。

D3.js 看上去入门较难，官方文档一眼望去，密密麻麻全是英文，一点都不像做可视化工作的工具库，非常劝退。

实际上，D3官方文档并不是拿来入门阅读的，而是使用的时候，用来查阅的。这种把全部函数密密麻麻分布在一页里操作，其实在查阅的时候非常高效，只用ctrl+f，利用浏览器自带的检索功能，即可找到想要的功能解释。

我花了半天的时间完成了D3.js的入门。方法是带着一个实际功能需求来看Shirley Wu 的入门教学视频，然后在Obeservable上实现这个案例。今天我想做一个滑动日期选择器，有12个不同颜色的线段构成，每个线段代表一个月份，可以拖动选择（今晚无法上传图片）。这种个性化的设计，用Echarts等工具就难以满足需求。D3做这个，就非常容易。

cocos2d-x JS 获取屏幕大小或中点

 

以一张背景图为例：

var HelloWorldLayer = cc.Layer.extend({
          ctor:function () {

              this._super();
             var bg = new cc.Sprite(res.HelloWorld_png);
             var size = cc.director.getWinSize();//获取屏幕大小
             bg.x = size.width / 2;      //  x轴／2即为x轴中点
             bg.y = size.height / 2;    //   y轴／2即为y轴中点
             this.addChild(bg, 1);
             return true;
          }
});