分子力，又称分子间力、范德华力，是指分子间的相互作用。当两个分子相距较远时，主要表现为吸引力，主要来自一个分子被另一个分子随时间快速变化的电偶极矩极化而引起的相互作用；当两个分子非常接近时，当分子的外部电子云开始重叠时，排斥力变得占主导地位。HTforWeb提供了弹性布局（也称为力导向布局）的功能，即根据节点之间的相互斥力和相连节点之间的引力，弹性布局运行一段时间后，整体拓扑网络结构会逐渐发生变化。达到收敛和稳定的平衡状态。这个功能很有意思，今天我们就来展示一下它的魅力。本例地址：http://www.hightopo.com/demo/...使用弹性布局功能需要在引入ht.js后引入一个ht-forcelayout.js弹性布局插件库core库，因为也用到了form表单，所以要引入ht-form.js的form插件库：ht.layout.Force3dLayout类提供3D弹性布局，构造函数可以传入两个参数DataModel和Graph3dView。默认情况下，只会布置未选中的图元。如果构造函数参数为Graph3dView，视图组件的isMovable和isVisible函数会影响图元是否可以布局。图元样式的layoutable属性也可以设置为false以防止图元参与布局。介绍完HT包弹性布局的背景，接下来就来帮你轻松实现这个效果。首先，我们定义一个颜色数组变量来存储每个弹力球的颜色，同时定义一个随机函数在数组中生成随机颜色：varcolorList=['#FFAFA4','#B887C5','#B9EA9C','#CFD9E7','#4590B8','#FF9C30'],colorLen=colorList.length;varrandomColor=function(){varran=Math.random()*colorLen;返回colorList[Math.floor(ran)];//6种随机颜色};然后创建一个弹力球，简单的生成一个3D节点，通过设置节点的style属性来控制节点的显示方式，其中设置“shape3d”为“sphere”为ht.Node六面体变成3D球体模型，然后将“shape3d”属性设置为前面定义的随机颜色，s3是HT封装的setSize3d函数的缩写，用来设置3D节点的大小，最后将这个节点添加到数据模型dataModel中：varcreateNode=function(dm){//创建一个节点nodecirclevarnode=newht.Node();node.s({//设置样式为setStyle'shape3d':'sphere','shape3d.color':randomColor()//设置随机颜色});node.s3(40,40,40);dm.add（节点）；返回节点；}；现在渲染图上的弹力球之间是有线的，我们乍一看感觉这个连接很不一般，也是通过构造节点来构造的。该节点由HTforWeb建模手册中setShape3dModel函数自定义的ht.Default.createRingModel根据xy平面的曲线围绕一个圆形成。3D环模型，命名为'custom'：ht.Default.setShape3dModel(//创建模型，根据xy平面的曲线形成3D模型。'自定义',ht.Default.createRingModel([0.5,0.5,-0.2,0,0.5,-0.5],[1,3]));HT将自定义属性和HT默认属性调用方法分为这样，可以有效区分node.a和node.s（详见HTforWeb入门手册样式章节），我们使用了这个创建管道时的方法：varupdatePipeline=function(edge){//重置边的样式varpipeline=edge.a('pipeline');pipeline.s3(1,1,1);//设置大小pipeline.p3(0,0,0);//设置坐标varnode1=edge.getSourceAgent(),//获取图上连接的起始节点node2=edge.getTargetAgent();//获取图上连接的目标节点pipeline.s('mat',createMatrix(node1.p3(),node2.p3(),20));//3d整体图形矩阵变化};最神秘的是如何让两个节点“相互靠近”的效果？我们知道矩阵可以描述任何线性变换。线性变换保留直线和平行线。虽然线性变换保留直线，但其他几何属性（例如长度、角度、面积和体积）可能会因变换而改变。简单地说，线性变换可以“拉伸”坐标系，但不会“弯曲”或“扭曲”坐标系。该函数主要是对拖动弹性球后拖动的连线进行“改变矩阵”操作。变化矩阵也是HT封装的ht.Default.createMatrix函数。通过将节点的style属性添加到mat中设置为自定义函数，就是将这个节点的坐标乘以“mat”属性对应的值，也就是说如果当前这个管道的旋转角度为[Math.PI/6,0,0]，假设我们在createMatrix函数中设置r3为[Math.PI/3,0,0]，那么节点会旋转90度。创建变化矩阵非常容易：varcreateMatrix=function(p1,p2,width){//createMatrix(array,matrix)将JSON中描述的一组缩放、移动、旋转等操作转换为对应的变化矩阵varvec=[p2[0]-p1[0],p2[1]-p1[1],p2[2]-p1[2]],dist=ht.Default.getDistance(p1,p2);//获取两点之间的距离，或者向量长度returnht.Default.createMatrix({s3:[width,dist,width],r3:[Math.PI/2-Math.asin(vec[1]/dist),Math.atan2(vec[0],vec[2]),0],rotationMode:'xyz',t3:[(p1[0]+p2[0])/2,(p1[1]+p2[1])/2,(p1[2]+p2[2])/2]});};基本配件都定义好了，然后将“shape3d”属性设置为自定义3D模型“custom”，将“layoutable”属性设置为“false”，防止图元参与布局，刷新点之间的连接通过edge.a('pipeline',node)，并将其添加到数据模型dataModel:varcreateEdge=function(dm,node1,node2){//创建'custom'模型的边varnode=newht.节点（）;node.s({'shape3d':'custom','shape3d.color':'#ECE0D4','layoutable':false});dm.add（节点）；varedge=newht.Edge(node1,node2);edge.a('管道',节点);edge.s('edge.color','rgba(0,0,0,0)');dm.add(边);返回边缘；}；插一句：我们也可以用业界的HeatMap热力图做文章，效果还是很炫的，具体地址http://hightopo.com/guide/gui...界面上面的图形都是画出来的，剩下的只是表格表格。首先在HTML页面添加form表单，使用HT封装的ht.widget.FormPane函数：varformPane=newht.widget.FormPane();formPane.setWidth(230);formPane.setHeight(125);formPane.addToDOM();记住，窗体的宽高是一定要设置的，否则窗体无法显示。通过addRow函数向表单添加行。我们重点关注下面这几行，Color、Range和Intensity，这三个名字主要是用来控制“头灯”的。在HT中，直接使用setHeadlightColor/setHeadlightRange/setHeadlightIntensity这三个函数来控制“头灯”的颜色、范围和强度。Intensity'].forEach(function(name){varobj={id:name},func=function(oV,nV){g3d['setHeadlight'+name](nV);//===g3d.setHeadlightColor(nV)/g3d.setHeadlightRange(nV)/g3d.setHeadlightIntensity(nV)};if(name==='Color')obj.colorPicker={//ht.widget.ColorPicker为颜色选择框instant:true,value:g3d['getHeadlight'+name](),//===g3d.getHeadlightColor()onValueChanged:func};elseobj.slider={//slidermin:0,max:name==='Range'?20000:3,step:0.1,value:g3d['getHeadlight'+name](),onValueChanged:func};formPane.addRow([name,obj],[70,0.1]);});slider和colorPicker都是HT自定义的slider和colorselector，详见HTforWebForm手册。如果还有不明白的可以咨询我，也可以直接参考HTforWeb官网的说明书。
