09 2024 档案
摘要：知识介绍 多参数返回函数: 使用解构赋值 代码分析 // 根据缩放比例计算图像显示属性，返回图像在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
阅读全文
摘要：知识介绍 对SVG元素实现拖拽视图的功能 代码分析 对于SVG元素的viewBox属性（x, y, w, h），我们设置x,y作为信号量 const [boxLocation, setboxLocation] = createSignal({ x: 0, y: 0 }); 添加拖拽所需的变量和事件
阅读全文
摘要：知识介绍 对指定SVG元素实现滚轮zoom 代码分析 1. 对指定SVG元素实现滚轮zoom 设置viewBox属性{x,y,w,h}以及缩放系数scale为信号量 const [scale, setScale] = createSignal(1); // 初始缩放比例 const [boxLoca
阅读全文
