GraphView与TreeView等本质关系区别；左侧tree树形列表点击，右侧区域动态加载图纸分割布局动态可拖动中间分隔线

最新推荐文章于 2024-09-02 09:30:20 发布

原创

最新推荐文章于 2024-09-02 09:30:20 发布 · 313 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#ht.js #ht for web #canvas #webgl

数据可视化前端开发应用体验

GraphView跟TreeView是平级的组件！不是基类、派生关系！一个是拓扑图元组件、一个是树形组件，所有View类型的组件都是视图，用来设置数据模型DataModel的，数据都是由dm提供！

同样的数据模型，是可以同时给不同的视图组件，比如给TreeView和GraphView，一样的数据会有不同风格的展现方式，代码和界面截图如下：

HTML
<!DOCTYPE html>
<html>

<head>
    <title>Test</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    
    <style>
        html,
        body {
            padding: 0px;
            margin: 0px;
        }

        .main {
            margin: 0px;
            padding: 0px;
            position: absolute;
            top: 0px;
            bottom: 0px;
            left: 0px;
            right: 0px;
        }
    </style>

    <script src="core/htiotos.js"></script>
    <script>
        function init() {
            //同一个数据模型实例，给到不同的视图组件
            var dataModel = new ht.DataModel();
            var treeView = new ht.widget.TreeView(dataModel);
            var graphView = new ht.graph.GraphView(dataModel);

            var splitView = new ht.widget.SplitView(treeView, graphView, 'horizontal', .3);

            //数据模型设置内容
            // Add Group
            var group = new ht.Group();
            group.setExpa