知识介绍
- 使用select组件选择不同数据集，并将数据集渲染到页面上
- 对视图内所有元素进行指定距离的移动(by button)
代码分析
1 使用select组件选择不同数据集，并将数据集渲染到页面上
- 定义信号量和options
const [selectedFile,setSelectedFile] = createSignal("数据集1"); // 存储选择的文件名const options = {数据集1: './src/assets/dataset/matched_points_info_1.json',数据集2: './src/assets/dataset/matched_points_info_2.json',数据集3: './src/assets/dataset/matched_points_info_3.json',数据集4: './src/assets/dataset/matched_points_info_4.json',数据集5: './src/assets/dataset/matched_points_info_5.json',数据集6: './src/assets/dataset/matched_points_info_6.json',数据集7: './src/assets/dataset/matched_points_info_7.json',数据集8: './src/assets/dataset/matched_points_info_8.json',数据集9: './src/assets/dataset/matched_points_info_9.json',数据集10: './src/assets/dataset/matched_points_info_10.json',总数据集: './src/assets/dataset/merged_data.json'}
- 创建加载数据函数，并在件挂载时执行数据加载
请注意：在每次渲染新的数据集前，删除之前渲染的结果
const loadData = async (fileName: string) => {d3.select(svgMainRef).selectAll("*").remove(); // 清空主SVG内容d3.select(svgLenRef).selectAll("*").remove(); // 清空辅助SVG内容try {const response = await fetch(options[fileName]);if (!response.ok) {throw new Error(`HTTP 错误！状态码：${response.status}`); // 若响应不OK则抛出错误}const jsonData: MatchData = await response.json(); // 解析JSON数据setData(jsonData); // 设置状态信号中存储的数据setXpoints(jsonData.X_points); // 设置X坐标点setYpoints(jsonData.Y_transformed_points); // 设置Y坐标点setConnections(jsonData.connections); // 设置连接信息drawMainSVG(); // 调用绘制主SVG的函数drawLenSVG(); // 调用绘制辅助SVG的函数} catch (error) {console.error("加载数据时出错:", error); // 捕获并输出错误信息}};// 组件挂载时执行的数据加载onMount(() => {loadData(selectedFile()); // 默认加载第一次选择的文件的数据});
- 创建事件，处理select变化
// 处理选择变化事件const handleFileChange = (e: Event) => {const value = (e.target as HTMLSelectElement).value;setSelectedFile(value); // 更新选中的文件名loadData(value); // 根据选中的文件名加载数据};
- 在return中，增加select组件，并绑定事件
<select value={selectedFile()} onInput={handleFileChange}><For each={Object.keys(options)}>{file => <option value={file}>{file}</option>}</For></select>
2 对视图内所有元素进行指定距离的移动
- 设置偏移量的信号量
const [transform, setTransform] = createSignal(d3.zoomIdentity);
- 设置偏移值和函数(by button)
const panX = 20;const panY = 20;// 定义移动视点的函数const panView = (dx, dy) => {const newTransform = transform().translate(dx, dy);setTransform(newTransform);// 更新 mainSVG 和 lenSVG 的视图d3.select(svgMainRef).select('g').attr('transform', newTransform);updateLenSVG(newTransform);};
- 设置button
<div><button onClick={() => panView(-panX, 0)}>左移</button><button onClick={() => panView(panX, 0)}>右移</button><button onClick={() => panView(0, -panY)}>上移</button><button onClick={() => panView(0, panY)}>下移</button></div>
