所以，要实现弹框，首先应新建Node，并将其的层级设置为‘higher’，在这之前还需要将场景图的JSON文件反序列化，并且给反序列化后的图元均设置为层级‘lower’，防止被已有的图元挡住：
| ht.Default.xhrLoad('meadow.json', function(text) { const json = ht.Default.parse(text); if(json.title) document.title = json.title; dataModel.deserialize(json); //设置层级 dataModel.each(function(data){ data.setLayer('lower'); }); //新建node var node = new ht.Node(); node.s('2d.visible',false); node.setLayer('higher'); dataModel.add(node); }) |
然后，对底层的DIV监听mousemove事件，判断鼠标的位置是否在上述三个对象之上，根据对象类型，调用layout()函数对Node重新布局：
| graphView.getView().addEventListener('mousemove', function(e) { node.s('2d.visible',false); var hoverData = graphView.getDataAt(e); pos = graphView.getLogicalPoint(e); if(!hoverData) return; if(tree[hoverData.getTag()]){ layout(node, pos, 'tips1'); } else if (grass[hoverData.getTag()]) { layout(node, pos, 'tips2'); } else if (mountain[hoverData.getTag()]) { layout(node, pos, 'tips3'); } }); |
layout()函数所做的事情，已经在前面详细的阐述，其中，弹框中属性值的更新是将JSON文件的的text属性进行数据绑定，绑定的格式很简单，只需将以前的参数值用一个带func属性的对象替换即可，func的内容有一下几种类型：
1、function类型，直接调用该函数，并传入相关Data和view对象，由函数返回值决定参数值，即func(data, view)；调用。
2、string类型：
style@***开头，则返回data.getStyle(***)值，其中***代表style的属性名。
attr@***开头，则返回data.getAttr(***)值，其中***代表attr的属性名。
field@***开头，则返回data.***值，其中***代表attr的属性名。
如果不匹配以上几种情况，则直接将string类型作为data对象的函数名调用data***(view)，返回值作为参数值。
除了func属性外，还可以设置value属性作为默认值，如果对应的func取得的值为undefined或者null时，则会采用value属性定义的默认值，详情可见HT for Web数据绑定手册（http://www.hightopo.com/guide/guide/core/datamodel/ht-datamodel-guide.html）。例如，在这里，'tips1.json'文件中对阳光值进行数据绑定的结果如下：
| "text": { "func": "attr@sunshine", "value": "阳光值" }, |
下面贴上layout()函数的源代码：
