js实现knn算法分类可视化演示交互效果代码-html代码-BFW代码库

js实现knn算法分类可视化演示交互效果代码

代码语言：html

所属分类：其他

代码描述：js实现knn算法分类可视化演示交互效果代码，K最近邻（K-Nearest Neighbors, KNN）算法是一种简单且直观的监督学习方法。它通过计算新数据点与训练集中各点的距离，找出最近的K个邻居，并根据这些邻居的类别进行投票，决定新数据点的分类。KNN算法适用于分类和回归问题，但需要选择合适的K值和距离度量方法，且在大数据集上计算成本较高。

代码标签： js knn 算法分类可视化演示交互

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

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>KNN</title>
</head>

<body>
    <canvas id="canv" style="border: 1px #000 solid;"></canvas>
    <!-- 当前点 -->
    <span id="point"></span>
    <input type="color" id="clrDom" value="#80ff00" />
    <input type="number" id="KKKKK" placeholder="3" />
    <script >
        /*
* @desc Knn算法
* @param  {Object} current
* @param  {Array} points
* @param  {Number} k
* @param  {Function} c
* @return {Array}
*/
// 函数目的是为了得到最靠近的k个点，还有分类标识
function getKnn(current, points, labelX, labelY, k, c) {
    var dists = [];//存放最接近的
    var classify = [];//分类标识
    points.map(function (item) {
       // 存储分类标识
        if (classify.indexOf(item[labelY]) == -1) classify.push(item[labelY]);
        var result = {};
        result.p = item;
        // console.log(result.p);
        result.d = c(current, item[labelX]);
        dists.push(result);
    });
    dists.sort(function (a, b) {//排序
        return a.d - b.d;
    });
    return { dists: dists.slice(0, k), classify: classify };
}

/*
* @desc 决策
* @param  {Object} current 输入值
* @param  {Object} points 训练样本集
* @param  {Object} labelX 用于分类的输入值
* @param  {Object} labelY 用于分类的输出值
* @param  {Number} k 用于选择最近邻的数目
* @param  {Function} c 自定义比较函数
* @return {Object}
*/
function classify0(current, points, labelX, labelY, k, c) {
    var result = [];
    var knn = getKnn(current, points, labelX, labelY, k, c);
    // 最接近的k个点
    var dists = knn.dists;
    for (var i of knn.classify) {
      // 存储特征种类，并把特征出现的次数置为0
        result.push({
            label: i,
            value: 0
        });
    }
    dists.map(function (item) {
        for (var i of result) {
          //   k个最接近点特征进行统计
            if (i.label === item.p[labelY]) {
                i.value++;
                break;
            }
        }
    });
    result.sort(function (a, b) {
      //  特征弧线次数降序排列
        return b.value - a.value;
    });
    //  算出出现次数最多的特征
    return { result: result[0].label, dists: dists };
}


    </script>
    <script>
        var dataSet = [];
        var drawMousePoint = false;
        var canvas = document.getElementById("canv");
        var clrDom = document.getElementById("clrDom");
        var KKKKK = document.getElementById("KKKKK");
        var cxt = canvas.getContext("2d");
        var color = "#80ff00";
        // 画布的长宽
        canvas.width = 600;
        canvas.height = 300;
        function getEvPoint(e) {
             // console.log(e);
            return { x: e.offsetX, y: e.offsetY };
        }
        function onMouseOut(e) {
            if (!drawMousePoint)  return;
            dr.........完整代码请登录后点击上方下载按钮下载查看