D3、openlayers的一次尝试
近期尝试了一个webgl相关的内容，有些小激动，及时分享一下我的测试示例，效果如下：
此示例分从业务角度分为两部分，一个部分为d3展示的柱图，另一部分则为用openlayers展示的地图。而其难点却在界面的交互效果。实现内容的翻面。
一、翻面效果的实现
此效果看似神奇，理解清楚原理后也还是很简单的。主要用到css3的backface-visibility属性，他表示元素正面运动到用户不可见的位置时，当前元素是否可见。
<div class="flip-container">
<div class="flip-wrap">
<div class="front">
</div>
<div class="back">
</div>
</div>
</div>以上是html代码的结构，flip-container作为最外层的包装，在其上面应用了perspective属性（此属性的详细解释可参考此文章），表示视距，他能影响到我们3d变换效果是否更接近真实；flip-wrap作为前、后两个div的父级的参照，在现代浏览上此处可以不加入3d变换属性，而Ie则需要加入。front和back这两个div都是需要加上3d变换效果的。而对front的z-index层级加高，是为了让其默认显示在最前面。back默认让其旋转至-180deg，是为了让其过滤效果更为流畅和平滑。
.flip-container{
-webkit-perspective: 1000;
-moz-perspective: 1000;
perspective: 1000;
width: 600px;
height: 400px;
margin: 0 auto;
}
.flip-wrap{
position: relative;
width: 100%;
height: 100%;
/*transform-style设置在父级，为了兼容IE*/
transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
}
.flip-wrap > .front, .flip-wrap >.back{
position: absolute;
left: 0;
top: 0;
height: 100%;
width: 100%;
-moz-transition: .6s;
-ms-transition: .6s;
transition: .6s;
transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
backface-visibility: hidden; /*动画完成后，没正面面向用户，则隐藏*/
}
.flip-wrap > .front{
background: red;
transform: rotateY(0deg);
z-index: 2; /*z轴高一点，覆盖back层*/
}
.flip-wrap > .back{
background: green;
transform: rotateY(-180deg);
}
.flip-container:hover .front{
transform: rotateY(180deg);
}
.flip-container:hover .back{
transform: rotateY(0deg);
}二、JS部分实现
JS代码的结构图：
flip.js：为此组件 入口
flip.ol.js：openlayer的具体实现
flip.d3.js：d3绘制柱图的具体实现
flip.store.js：数据接口，用于返回从后台接口获取到的数据
city.js：城市名称数据字典
adapter/d3.js：用于将后台数据转换为d3可用的数据格式
adapter/ol.js：用于将后台数据转换为openlayers可用的数据格式
adapter/provider.js：转换器工厂入口
本示例主要以flip.js为主，在组合d3和ol相关功能。
class Flip {
constructor(options){
this.options = _.assign(Flip.Default, options);
this.d3 = new d3(this.options);
this.ol = new ol(this.options);
this.store = new store();
this.adapterProvider = new AdapterProvider();
}
/**
* 组件的渲染
*/
render (){
//这里发送数据到内部进行渲染
var promise = this.store.getData();//这里应该是个异步
//还需要一个数据转换工厂，实现数据=>d3，或者数据=>ol的转换
promise.then((data)=>{
var d3Data = this.adapterProvider.convert(data, AdapterProvider.type.d3); //同步
var olData = this.adapterProvider.convert(data, AdapterProvider.type.ol);
this.d3.render(d3Data);
this.ol.render(olData);
});
}
}在构造函数中对存储器、转换器、d3和ol进行实例化，然后提供render方法进行数据的获取和绘制，具体细节下载代码查看。