给出的代码。取自 Q 中的用户 Stranger，并稍作调整。 Q Help中的Halma Stranger至少使鼠标释放时形状粘在点（120,120）上（这只适用于触摸的形状）...
//ctrl+wheel увеличить масштаб
<!DOCTYPE html>
<meta charset="utf-8">
<title>My Project 1.0.0.1</title>
<html>
<script src="https://d3js.org/d3.v5.min.js"></script>
<style>
html,body{
overflow-y:hidden;
}
</style>
<body>
<script>
//src="https://d3js.org/d3.v5.min.js"
//scr="d3.js"
var delta = 100;
var x7k = [200]
var y4k = [200]
var ii = 0
for(var y=0; y<=8;y++){
for(var x=0; x<=8;x++){
ii++;
x7k[ii]=x*delta;
y4k[ii]=y*delta;
}}
var canvas = d3.select("body")
.append("svg")
.attr("height", 1024)
.attr("width", 1366);
/*var img0=canvas.append("svg:image")
.attr("xlink:href", "1.svg")
.attr("x",677)
.attr("y",0)
var img1=canvas.append("svg:image")
*/
for (var ii=2;ii<=81;ii=ii+2){
img1=canvas.append("svg:image")
.attr("xlink:href", "1.svg")
.attr("x",x7k[ii])
.attr("y",y4k[ii])
}
/*var img2=canvas.append("svg:image")
img2=canvas.append("svg:image")
.attr("xlink:href", "2.svg")
.attr("x",x7k[8])
.attr("y",y4k[0])
*/
var polygon0=canvas.append("polygon")
polygon0=canvas.append("polygon")
polygon0.attr("points", [0,0,111,122,222,222,212,122])// здесь было исправлено
polygon0.style("fill", `rgba(100,11,11,0.5)`)
polygon0.style("stroke", "black")
polygon0.style("strokeWidth", "1px")
var radius = 45;
var circle_data1 = d3.range(18).map(function(i) {
return {x: 100+i*50, y: rnd()};
});
var circles = d3.select("svg")
.append("g")
.attr("class", "circles")
.selectAll("circle")
.data(circle_data1)
//.data(circle_data2)
.enter()
.append("circle")
.attr("cx", function(d,i) {return (d.x)})
.attr("cy", function(d,i) {return (d.y)})
.attr("r", radius)
.style('transition', "200ms")
.attr("fill", function(d,i) {
if(i<=8){
return `rgba(100,112,222,0.5)`
}
else {return `rgba(0,255,121,0.5)` }
})
.call(d3.drag().on("start", function(d) {
d3.select(this)
.raise()
.attr('stroke', 'black')
.style('transition', "unset")
}).on("drag", function(d) {
d3.select(this)
.attr("cx", d.x = d3.event.x)
.attr("cy", d.y = d3.event.y);
}).on("end", function(d) {
d3.select(this)
.attr('stroke', 'transparent')
.style('transition', "200ms")
})
);
/*ball.onmouseup = function() {
document.onmousemove = null;
ball.onmouseup = null;
};*/
function upd () {
var newData = [
50, 50, 150, 50, 250, 50,
50, 150, 150, 150, 250, 150,
50, 250, 150, 250, 250, 250,
(6-1)*100+50, (6-1)*100+50, (7-1)*100+50, (6-1)*100+50, (8-1)*100+50, (6-1)*100+50,
(6-1)*100+50, (7-1)*100+50, (7-1)*100+50, (7-1)*100+50, (8-1)*100+50, (7-1)*100+50,
(6-1)*100+50, (8-1)*100+50, (7-1)*100+50, (8-1)*100+50, (8-1)*100+50, (8-1)*100+50
///*//////
]
circle_data1.forEach(function(d, i) {
d.x = newData[i * 2]
d.y = newData[i * 2 + 1]
})
circles.data(circle_data1)
.attr("cx", function(d) {return (d.x)})
.attr('stroke', 'black')
.attr("cy", function(d) {return (d.y)})
}
upd();
function rnd() {
return 20 + Math.random() * 110
}
</script>
</body>
</html>
发生了。增加了粘点(120, 120) 现在剩下来做检查和返回坐标的功能。因此，一切正常。准备好后，我会在这里发布。
这是corners代码的实现（仅用于实现AI）。这是使用 d3.js 库的 Drag N Drop 方法和 Q 中的 @Stranger 与圆圈一起工作 + 我在代码中添加习惯的能力......