luankefei / d3-chart-lib Goto Github PK

1. yeoman 用于生成项目结构
2. gulp 项目开发中的质量监控，自动化测试和最后的打包
3. git 版本控制
4. bower 客户端包管理器
5. npm 服务器端包管理器

一、 关于模块加载

模块化的设计，目的是减少全局污染、隐藏私有对象和多人协同开发。

目前想到的可行方案：

1. 命名空间方式 namespace.util、namespace.http
2. 闭包 var moduleA = (function() { return 'A' })
3. 自己实现amd，核心api是define、require和use
4. 使用node将amd、cmd和commonjs规范的代码编译成浏览器端可用的js

二、如何使用

设计思路是将整个图表包装成一个web组件，灵感来源于jquery插件和angular的directive
这与当前流行的web compoent组件化思路一致，未来切换到shadow dom也会很顺利

一个图表由3部分组成，html代码段，js和样式。在使用默认样式的情况下，代码大致如下：

chart#map(data-name="worldMap")
config(src="data/style.js")
event(data-name="hover", data-type="highlight")
component(data-name="axis")

var map = document.getElementById('map')
Y.init(map)

三、事件绑定

事件绑定分两种，一种是通过event标签绑定，默认支持约10种事件。另一种是通过重写事件来进行扩展绑定。这里主要介绍扩展绑定。

var map = T.find('#map')

// 以下事件均为延迟绑定
map.country = {}
map.country.click = function(d, i, obj) {

obj = d3.select(obj)
obj.style('fill', 'red')

}