metricflow
/
demo
/
demo9.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>MetricFlow</title>
    <style>
    </style>

    <script src="../src/components/metricflow-1.2.0.min.js"></script>
<!--    <script src="../dev/metricflow.js"></script>-->
    <script>
        window.onload = function () {
            let metricFlow = MetricFlow("graph")

            /*定义节点数据*/
            let nodes= {
                "x":20,
                "y":200,
                "id":"node1",
                "title":{'name':"xx公司"},
                "data":[
                    {'name':'简介：xxxxxxx'},
                ],
                "children":[
                    {
                        "id":"node2",
                        "title":{'name':"xx部门"},
                        "data":[
                            {'name':'简介：xxxxxxx'},
                        ],
                        "children":[
                            {
                                "id":"node42",
                                "title":{'name':"xx中心"},
                                "data":[
                                    {'name':'简介：xxxxxxx'},
                                ]
                            },
                            {
                                "id":"node413",
                                "title":{'name':"xx中心"},
                                "data":[
                                    {'name':'简介：xxxxxxx'},
                                ]
                            }
                        ]
                    },
                    {
                        "id":"node3",
                        "title":{'name':"xx部门"},
                        "data":[
                            {'name':'简介：xxxxxxx'},
                        ],
                        "children":[
                            {
                                "id":"node4",
                                "title":{'name':"xx中心"},
                                "data":[
                                    {'name':'简介：xxxxxxx'},
                                ]
                            },
                            {
                                "id":"node41",
                                "title":{'name':"xx中心"},
                                "data":[
                                    {'name':'简介：xxxxxxx'},
                                ]
                            }
                        ]
                    },
                    {
                        "id":"node223",
                        "title":{'name':"xx部门"},
                        "data":[
                            {'name':'简介：xxxxxxx'},
                        ],
                        "children":[
                            {
                                "id":"node224",
                                "title":{'name':"xx中心"},
                                "data":[
                                    {'name':'简介：xxxxxxx'},
                                ]
                            },
                            {
                                "id":"node4221",
                                "title":{'name':"xx中心"},
                                "data":[
                                    {'name':'简介：xxxxxxx'},
                                ]
                            }
                        ]
                    }
                ]
            };

            metricFlow.createNodes(nodes,format);
        }
        function format(data){
            // data['title'] = {'name':"更改title的名字"}
            return data;
        }

    </script>
</head>
<body>
<!--定义一个画布 graph -->
<div id="graph" height="700px" width="1100px" >
</div>
</body>
</html>