索引

• 概述
• 示例一：综合示例
• 示例二：与EdgeType插件集成

概述

HT核心产品包中的ht.Edge和ht.Shape已经支持斑马线效果，如果需要流动，您可以使用setTimeout函数改变图元*.dash.offset样式， 或者使用Animation插件，但是这两种方式是基于事件机制的刷新，可能会影响到性能。

此插件内部启动一个定时器，定时遍历DataModel中的数据并重绘，略过了事件派发的过程，如果您的应用对性能非常敏感，请使用此插件

和流动插件类似，此插件没有引入新的类，只是在ht.Shape、ht.Edge和ht.graph.GraphView上扩展了一些方法或样式，因此非常易于使用。要使用此插件，只需要引入ht-dashflow.js文件：

<script src="ht.js"></script> <!--先引入ht.js-->
<script src="ht-dashflow.js"></script>

注意：使用此插件需要安装最新版的Chrome、Firefox或IE11浏览器(不支持IE10及IE9)

此插件在ht.Shape和ht.Edge类上扩展了一些样式控制流动效果，您可以通过ht.Shape#setStyle和ht.Edge#setStyle操作这些样式， 说明如下：

• edge.dash.flow 值为true或false，是否启用ht.Edge的虚线流动，默认值为false
• shape.dash.flow 值为true或false，是否启用ht.Shape的虚线流动，默认值为false
• edge.dash.flow.step ht.Edge虚线流动的步进，默认值为3
• shape.dash.flow.step ht.Shape虚线流动的步进，默认值为3
• edge.dash.flow.reverse 值为true或flase，控制ht.Edge的反向流动，默认值为false
• shape.dash.flow.reverse 值为true或flase，控制ht.Shape的反向流动，默认值为false

ht.graph.GraphView上扩展的API如下：

• enableDashFlow(interval) 启动虚线流动，默认为false，interval表示流动的时间间隔
• disableDashFlow() 停止虚线流动
• dashFlowInterval 通过setDashFlowInterval(interval)和getDashFlowInterval()操作，控制虚线流动的时间间隔

从上面的说明中可以看出，拓扑上的所有Data的虚线流动的时间间隔是一样的，如果需要营造不同的Data流动速度不同的效果，可以修改相关Data的*.dash.flow.step样式。

示例一：综合示例

此插件可以和流动插件及扩展编辑插件一同使用,您可以操作下面的例子验证此插件：

示例二：与EdgeType插件集成

实际上，与EdgeType插件集成时您不需要做任何额外的处理，按原有的方式使用这两个插件各自的API即可：

这个例子里使用了全局的默认样式配置：

<script type="text/javascript">
    htconfig = {
        Style: {
            'edge.width': 2,
            'edge.color': 'red',
            'edge.dash': true,
            'shape.dash': true,
            'edge.dash.color': "yellow",
            'shape.dash.color': "yellow",
            'edge.dash.flow': true,
            'shape.dash.flow': true
        }
    };
</script>

这种语法结构的详细信息可以参考Theme文档