随笔分类 - SolidJS开发
摘要：对图片指定范围的区域进行填充显示 1 定义变量，svg和image // 用于保存SVG元素的引用 const [svgRef, setSvgRef] = createSignal<SVGSVGElement | null>(null); // 图像原始尺寸 const imageSize = {
阅读全文
摘要：知识介绍 给图片添加旋转功能并自适应容器的宽和高 代码分析 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
阅读全文
摘要：使用solidJS实现力导向图 力导向图参考：https://segmentfault.com/a/1190000016384506 力算法代码： /** * @desc 力算法 */ function force(data, ctx, size) { const { nodes, links }
阅读全文
摘要：使用solidJS实现力导向图 力导向图参考：https://observablehq.com/@d3/force-directed-graph/2 原始代码与分析 chart = { // Specify the dimensions of the chart. const width = 928
阅读全文
