摘要：
demo简介 读取两个csv文件(geo数据和drawing数据) 绘制散点图 使用矩形框选中范围内的数据（只选中drawing数据） 拖动矩形框 或 reshape矩形框，同时，矩形框内的数据点坐标也相应变换 核心代码介绍 1 template 设置了工具栏和画布作为两个核心组件 工具栏包含”绘制 阅读全文
摘要：
端口号识别 前端和后端项目目前都在本地运行，但是端口号不同 前端：http://localhost:5173/ 后端：http://localhost:5000/ 不同端口号视为不在同一个域之下。 解决跨域的方法 使用Flask的CORS： 您可以在后端（例如使用 Flask）应用 CORS（跨域资 阅读全文
摘要：
知识介绍 多参数返回函数: 使用解构赋值 代码分析 // 根据缩放比例计算图像显示属性，返回图像在SVG中的显示区域(左上x,左上y,w,h) const calculateImageAttributes = (scale, imageSize, svgSize) => { const W = im 阅读全文
摘要：
对图片指定范围的区域进行填充显示 1 定义变量，svg和image // 用于保存SVG元素的引用 const [svgRef, setSvgRef] = createSignal<SVGSVGElement | null>(null); // 图像原始尺寸 const imageSize = { 阅读全文
摘要：
知识介绍 对json数据进行优化 使用vuex完成不同components之间的参数 代码分析 1. 对json数据进行优化 原数据： "connections": [ { "X_point": { "coords": [ 13327354.751253285, 3229146.982745276 阅读全文
摘要：
知识介绍 给图片添加旋转功能并自适应容器的宽和高 代码分析 1 给图片添加旋转功能并自适应容器的宽和高 定义信号量 const [imgRotation,setImgRotation] = createSignal(0); const [isLandscape, setIsLandscape] = 阅读全文
摘要：
知识介绍 使用select组件选择不同数据集，并将数据集渲染到页面上 对视图内所有元素进行指定距离的移动(by button) 代码分析 1 使用select组件选择不同数据集，并将数据集渲染到页面上 定义信号量和options const [selectedFile,setSelectedFile 阅读全文
摘要：
知识介绍 在视图缩放时，对SVG中的元素也进行缩放，使得text、circle等在放大后不会过于占据视野 对mainSVG中的蓝点增加双击强调的效果 对双击强调后的蓝点在lenSVG视图中，增加其他元素的半透明效果 代码分析 1 在视图缩放时，对SVG中的元素也进行缩放，使得text、circle等 阅读全文
摘要：
知识介绍 使用两个SVG进行主视图和Len视图的区分，len视图中附带额外信息 代码分析 1 使用两个SVG进行主视图和Len视图的区分 设置主视图 // 绘制主SVG的函数 const drawMainSVG = () => { // 选择主SVG并设置其属性 const svgMain = d3 阅读全文
摘要：
知识介绍 在div容器中并列两个SVG元素 -> 对div容器设置display: "flex" 使用d3创建散点图 使用d3的scaleLinear函数创建x轴和y轴的比例尺 对d3的svg元素增加tooltip提示 对svg元素增加zoom功能 使用d3在svg中画线 对d3中某个元素的attr 阅读全文
