Index

• Overview
• Demo1: Comprehensive example
• Demo2: Integration with Edgetype plug-ins

Overview

HT ht.Edge and ht.Shape in the core product package already supports the zebra effect, if you need to flow, you can use the setTimeout function to change the data *.dash.offset style, or use the Animation plug-in, but these two methods are based on the refresh of event mechanism, which may affect performance.

This plug-in internally starts a timer, periodically traversing the DataModel data and redraw, skip the event distribution process, if your application is very sensitive to performance, please use this plug-in, it is similar with flow plug-in, this plug-in did not introduce new classes, just extend some methods or styles in ht.Shape, ht.Edge and ht.graph.GraphView and are therefore very easy to use. To use this plug-in, simply introduce ht-dashflow.js files:

<script src="ht.js"></script> <!--Introduce ht.js file first-->
<script src="ht-dashflow.js"></script>

Note: Install the latest version of the Chrome, Firefox or IE11 browser (not supported IE10 and IE9) if use this plug-in

This plug-in expands some styles in ht.Shape and ht.Edge class to control the flow effect you can operate these style by ht.Shape#setStyle and ht.Edge#setStyle described as follows:

• edge.dash.flow The value is true or false and whether enabled ht.Edge dashed line flows, the default value is false
• shape.dash.flow The value is true or false and whether enabled ht.Shape dashed line flows, the default value is false
• edge.dash.flow.step The ht.Edge dashed line flowing step, the default value is 3
• shape.dash.flow.step The ht.Shape dashed line flowing step, the default value is 3
• edge.dash.flow.reverse The value is true or false, which controls ht.Edge reverse flow, default value is false
• shape.dash.flow.reverse The value is true or false, which controls ht.Shape reverse flow, default value is false

The API extended on ht.graph.GraphView is as follows:

• enableDashFlow(interval) Enable the dashed line flow, defaults to false, interval represents the time interval of flow
• disableDashFlow() Disable the dashed line flow
• dashFlowInterval Operates through setDashFlowInterval(interval) and getDashFlowInterval() to control the time interval of the dashed line flow

As can be seen from the above explanation, all the Data on the topology of the time interval is the same, if the need to create different Data flow speed of different effects, you can modify the relevant Data *.dash.flow.step style.

Demo1: Comprehensive example

This plug-in can be used with flow and extended edit plug-ins, and you can verify this plug-in by operating the following example:

Demo2: Integration with Edgetype plug-ins

In fact, you do not need to do any extra processing when integrating with the EdgeType plug-in, and use the two plug-ins APIs in the original way:

This example uses the global default style configuration:

<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>

Details of this syntactic structure can be referenced Theme Manual