2f:T51e,chart = { const svg = d3.create("svg") .attr("viewBox", `0 0 ${width + 100} ${height + 100}`); const pointerItem = { x: 0, y: 0, width: 0, height: 0, type: 'pointer', }; showData.push(pointerItem); const simulation = d3.forceSimulation(showData) .force('forceRectCollide', forceRectCollide()) .force('rect', forceRect(0, 0, width, height)); const gElement = svg .on('mousemove', function(d, i) { pointerItem.x = d.clientX - 100; pointerItem.y = d.clientY - pointerHeight / 2 - 150; pointerItem.width = pointerWidth; pointerItem.height = pointerHeight; }) .append('g') .attr('transform', 'translate(50, 50)'); simulation .on('tick', () => { gElement .selectAll('rect') .data(showData) .join('rect') .attr('width', d => { return d.width; }) .attr('height', d => { return d.height; }) .attr('x', d => { return d.x - d.width / 2; }) .attr('y', d => { return d.y - d.height / 2; }) .attr('fill', d => { if (d.type === 'pointer') { // return 'rgb(255, 69, 0)'; return 'none'; } return d.color; }); }).on('end', () => { simulation.restart(); }); return svg.node(); }30:Tfb9,// 矩形碰撞检测，模拟物理中的动量守恒 function forceRectCollide() { let nodes, strength = 0.5; function x(d) { return d.x + d.vx; } function y(d) { return d.y + d.vy; } function x1(d) { return d.x + d.vx - d.width / 2; } function x2(d) { return d.x + d.vx + d.width / 2; } function y1(d) { return d.y + d.vy - d.height / 2; } function y2(d) { return d.y + d.vy + d.height / 2; } // 检查边界，看两个矩形是否重叠 function isOverlay (node1, node2) { const node1Width = node1.width; const node1Height = node1.height; const node2Width = node2.width; const node2Height = node2.height; return ( Math.abs(Math.max(x2(node1) - x1(node2), x2(node2) - x1(node1))) < node1Width + node2Width && Math.abs(Math.max(y2(node1) - y1(node2), y2(node2) - y1(node1))) < node1Height + node2Height ); }; function force() { const tree = d3.quadtree(nodes, x, y); for (let i = 0; i < nodes?.length || 0; ++i) { const node = nodes[i]; tree.visit(function (quad, _x0, _y0, _x1, _y1) { if (!quad.length) { do { const { data } = quad; const nodeWidth = node.width; const nodeHeight = node.height; const dataWidth = data.width; const dataHeight = data.height; if (data) { if (data.index > node.index && isOverlay(node, data)) { let dx = Math.abs(Math.max(x2(node) - x1(data), x2(data) - x1(node))); dx = Math.abs(nodeWidth + dataWidth - dx); let dy = Math.abs(Math.max(y2(node) - y1(data), y2(data) - y1(node))); dy = Math.abs(nodeHeight + dataHeight - dy); let vectorX = x(node) - x(data); let vectorY = y(node) - y(data); // 单位化向量 if (vectorX === 0 && vectorY === 0) { vectorX = 1; vectorY = 1; } else if (vectorX !== 0 && vectorY !== 0) { const vectorR = Math.sqrt(vectorX**2 + vectorY**2); vectorX = vectorX / vectorR; vectorY = vectorY / vectorR; if (Math.abs(dx / vectorX) > Math.abs(dy / vectorY)) { dy = Math.abs(dy / vectorY) * vectorY; dx = Math.abs(dy) * vectorX / Math.abs(vectorY); } else { dx = Math.abs(dx / vectorX) * vectorX; dy = Math.abs(dx) * vectorY / Math.abs(vectorX); } } // 计算碰撞体的面积，将面积视为质量，移动距离视为速度，遵循动量守恒定律 node.vx += (Math.abs(dx) / vectorX * strength * dataWidth * dataHeight) / (nodeWidth * nodeHeight + dataWidth * dataHeight); data.vx -= (Math.abs(dx) / vectorX * strength * nodeWidth * nodeHeight) / (nodeWidth * nodeHeight + dataWidth * dataHeight); node.vy += (Math.abs(dy) / vectorY * strength * dataHeight * dataWidth) / (dataHeight * dataWidth + nodeHeight * nodeWidth); data.vy -= (Math.abs(dy) / vectorY * strength * nodeHeight * nodeWidth) / (dataHeight * dataWidth + nodeHeight * nodeWidth); } return; } return x2(node) < _x0 || x1(node) > _x1 || y2(node) < _y0 || y1(node) > _y1; } while ((quad = quad.next)); } }); } } force.initialize = function (_) { nodes = _; }; force.strength = function (_strength) { strength = _strength }; return force; }31:[] 2d:{"title":"D3 Force Rect Collide","cells":[{"id":0,"value":"# D3 Force Rect Collide\n\nforce collide, but rect","pinned":false,"hidden":false,"mode":"md"},{"id":79,"value":"$2f","pinned":true,"hidden":false,"mode":"ojs"},{"id":6,"value":"height = 700","pinned":true,"hidden":false,"mode":"ojs"},{"id":47,"value":"width = 1000","pinned":true,"hidden":false,"mode":"ojs"},{"id":49,"value":"pointerWidth = 150","pinned":true,"hidden":false,"mode":"ojs"},{"id":52,"value":"pointerHeight = 75","pinned":true,"hidden":false,"mode":"ojs"},{"id":58,"value":"displayCount = 200","pinned":true,"hidden":false,"mode":"ojs"},{"id":96,"value":"showData = genData(displayCount, width, height);","pinned":true,"hidden":false,"mode":"ojs"},{"id":54,"value":"function genData(count = 100, width, height) {\n\tconst showData = [];\n\tconst colors = ['rgb(255, 140, 0)', 'rgb(255, 215, 0)', 'rgb(144, 238, 144)', 'rgb(0, 206, 209)'];\n\n\tfor (let index = 0; index < count; index++) {\n\t\tconst size = Math.random() < 0.2 ? 3 : Math.floor(Math.random() * 2) + 1;\n\t\tshowData.push({\n\t\t\tid: index,\n\t\t\tx: Math.random() * width,\n\t\t\ty: Math.random() * height,\n\t\t\twidth: (size + 1) * 30,\n\t\t\theight: (size + 1) * 10,\n\t\t\tcolor: colors[Math.floor(Math.random() * colors.length)],\n\t\t});\n\t}\n\n\treturn showData;\n};","pinned":true,"hidden":false,"mode":"ojs"},{"id":60,"value":"// 将nodes固定在指定矩形区域内\nfunction forceRect(x, y, width, height) {\n let nodes;\n const strength = 1;\n function force() {\n for (let i = 0, n = nodes.length, node; i < n; ++i) {\n node = nodes[i];\n if (node.x < x) {\n node.vx += (x - node.x) * strength;\n } else if (node.x > x + width) {\n node.vx += (x + width - node.x) * strength;\n }\n if (node.y < y) {\n node.vy += (y - node.y) * strength;\n } else if (node.y > y + height) {\n node.vy += (y + height - node.y) * strength ;\n }\n }\n }\n\n force.initialize = function (_) {\n nodes = _;\n };\n return force;\n };","pinned":true,"hidden":false,"mode":"ojs"},{"id":62,"value":"$30","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W31","stdlib":"1","titling":"auto"}