java-web遗传算法最短路径规划

前言

这个课设就是给用户一个框，然后鼠标移动的时候显示鼠标的点所在的位置，然后选取任意个点，然后发送给服务器，计算一条从选择的第一个到最后一个的距离。
使用遗传算法，使用D3可视化库。

---

前端部分

使用CSS样式将需要点击的区域和body区域设置不同的样式。然后所有的内容都是用JavaScript完成，对于JavaScript的基本知识不做过多介绍，这也是一门面向对象的语言。

首先使用D3可视化库的对象在body后面追加(append)一个SVG对象，点击区域使用SVG对象，然后在SVG对象上 设置属性(attr)，设置宽为1000，长为500，将其样式设置为box的样式。

然后创建两个对象，一个对象用来画圆，另外一个对象用来显示该点坐标，画圆的属性设置为半径为5，属性设置为不显示（为了在下面的事件中显示），另外一个对象用来显示文本，属性设置红色，字体大小为11px，字体设置为sans-serif，属性同样是不显示。代码写法如下，var yuan = svg.append(“circle”).attr(“r”, 5).attr(‘class’,’move1’);使用svg对象的append方法追加一个circle标签的圆，然后设置圆的属性。

使用SVG对象绑定一个鼠标移动的事件，svg.on(‘click’,function(event))，在function(event)后面使用花括号写JavaScript的函数。在SVG对象的区域内如果有鼠标移动即可触发该事件，该事件的作用是将画圆和显示坐标的对象display的属性变成block状态，这样会跟随鼠标的移动而显示，便于用户实时查看所选点的坐标。然后对鼠标位置进行判断。如果超过了950则进行显示的移动，因为默认的显示是在点的右侧,所以这样的情况下将显示的坐标会在区域外，所以进行判断将显示的text文本放在左侧。

然后进行SVG对象的click操作绑定，当在SVG对象中进行点击操作的时候调用显示的点击反馈，使用的是一个mo的js动画图形库来进行反馈。然后在反馈后使用D3图形库的追加方式画出点击位置的圆和该点的坐标显示。然后调用ajax()的JavaScript函数。这个函数在布局内容结束后讲到。点击之后结果展示如图：

在显示布局结构上还有几个进行点击的按钮，使用遗传算法进行计算最短路径，使用基本的贪心算法来计算最短路径和一个进行重置的按钮。
在ajax.js文件中还定义了数据反馈的打印。在服务器进行数据的计算后返回的点的坐标。调用JavaScript的print()函数进行连线的打印。代码情况如下：

//接受数据后的画线和输出信息代码
function print(){
    //追加画线的功能
    var x1="",y1="",x2="",y2=