canvas实现K-Medoids聚类算法可视化执行过程效果代码

代码语言:html

所属分类:其他

代码描述:canvas实现K-Medoids聚类算法可视化执行过程效果代码

代码标签: 聚类 算法 可视化 执行 过程 效果

下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开

<!doctype html>
<html lang="en-us">

<head>
   
<meta charset="utf-8">

</head>

<body>


   
<div class="center">
       
<article>
           
<div class="social">

           
</div>
           
<h1 class="title">K-Medoids</h1>


           
<div class="content">
               
<div>
                   
<p>A visualization of a <a href="http://en.wikipedia.org/wiki/K-medoids">K-medoids clustering</a>.</p>
                   
<style>
                       
.post {
                           
max-width: none;
                           
width: 480px;
                           
padding: 0;
                       
}
                   
</style>
                   
<p><button onclick="doStep()">Step</button>
                       
<canvas id="canvas" ></canvas></p>
                   
<script>
                        var size = {x: 480, y:480};
                        var canvas = document.getElementById("canvas");
                        canvas.width = size.x;
                        canvas.height = size.y;
                        var TAU = Math.PI*2;
                        var draw = canvas.getContext("2d");
                       
                        var data = [{ label : "A", x : 2, y : 4 },
                                                { label : "B", x : 7, y : 3 },
                                                { label : "C", x : 3, y : 5 },
                                                { label : "D", x : 5, y : 3 },
                                                { label : "E", x : 7, y : 4 },
                                                { label : "F", x : 6, y : 8 },
                                                { label : "G", x : 6, y : 5 },
                                                { label : "H", x : 8, y : 4 },
                                                { label : "I", x : 2, y : 5 },
                                                { label : "J", x : 3, y : 7 }];
                       
                        var dataMap = {};
                        for(var i = 0; i < data.length; i += 1)
                                dataMap[data[i].label] = data[i];
                       
                       
                        var stepInterval = 0;
                        var state = {
                                tick : 0,
                                centers : []
                        };
                       
                        function clone(obj){
                                var res = {};
                                for(var i in obj)
                                        if(typeof(obj[i]) == "object")
                                                res[i] = clone(obj[i])
                                        else
                                                res[i] = obj[i];
                                return res;
                        }
                       
                        function stop(){
                                clearInterval(stepInterval);
                        }
                       
                        function reset(){
                                state.tick = 0;
                                state.centers = [{link:"D"}, {link:"E"}, {link:"H"}];
                                for(var i = 0; i < state.centers.length; i += 1){
                                        state.centers[i].children = [];
                                }
                        }
                       
                        function start(){
                     .........完整代码请登录后点击上方下载按钮下载查看

网友评论0