用 D3 实现可交互树状 HTML：支持布局切换、节点操作与拖动换位！

以下是使用 D3 实现上述需求的大致代码框架： ```javascript // 引入 D3 库 const d3 = require('d3'); // 定义一些常量 const DEFAULT_NODE_SIZE = { width: 50, height: 50 }; const DEFAULT_NODE_COLOR = 'black'; const HOVER_COLOR ='red'; // 创建 SVG 元素 const svg = d3.select('body').append('svg') .attr('width', '800') .attr('height', '600'); // 定义树的布局 const treeLayout = d3.tree().size([800, 600]); // 加载数据 d3.json('yourData.json').then(data => { // 处理数据并创建节点和连线 const root = d3.hierarchy(data); const links = treeLayout(root).links(); // 绘制连线 svg.selectAll('line') .data(links) .enter() .append('line') .attr('x1', d => d.source.x) .attr('y1', d => d.source.y) .attr('x2', d => d.target.x) .attr('y2', d => d.target.y); // 绘制节点 svg.selectAll('rect') .data(root.descendants()) .enter() .append('rect') .attr('width', DEFAULT_NODE_SIZE.width) .attr('height', DEFAULT_NODE_SIZE.height) .attr('x', d => d.x - DEFAULT_NODE_SIZE.width / 2) .attr('y', d => d.y - DEFAULT_NODE_SIZE.height / 2) .attr('stroke', DEFAULT_NODE_COLOR) .on('mouseover', function(d) { // 显示操作按钮 }) .on('mouseout', function(d) { // 隐藏操作按钮 }) .call(d3.drag() // 处理拖动逻辑 ); }); // 处理布局切换、缩放、拖动画布等逻辑 // 处理节点列表的交互逻辑 ``` 这只是一个简单的示例框架，实际实现中还需要完善各种细节和处理异常情况。 ######[AI问答 | 512点数解答 | 2025-05-25 15:12:57]