SolidJS-每日小知识(9/16)

知识介绍

1. 使用select组件选择不同数据集，并将数据集渲染到页面上
2. 对视图内所有元素进行指定距离的移动(by button)

代码分析

1 使用select组件选择不同数据集，并将数据集渲染到页面上

1. 定义信号量和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'
    }

2. 创建加载数据函数，并在件挂载时执行数据加载
   请注意：在每次渲染新的数据集前，删除之前渲染的结果

    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()); // 默认加载第一次选择的文件的数据
    });

3. 创建事件，处理select变化

    // 处理选择变化事件
    const handleFileChange = (e: Event) => {
        const value = (e.target as HTMLSelectElement).value;
        setSelectedFile(value); // 更新选中的文件名
        loadData(value); // 根据选中的文件名加载数据
    };

4. 在return中，增加select组件，并绑定事件

                <select value={selectedFile()} onInput={handleFileChange}>
                    <For each={Object.keys(options)}>
                        {file => <option value={file}>{file}</option>}
                    </For>
                </select>

2 对视图内所有元素进行指定距离的移动

1. 设置偏移量的信号量
   const [transform, setTransform] = createSignal(d3.zoomIdentity);
2. 设置偏移值和函数(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);
  };

3. 设置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>