首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

在D3 v5中缩放后限制轴移动

在D3 v5中,缩放后限制轴移动可以通过以下步骤实现:

  1. 首先,你需要创建一个缩放函数(scale)和一个轴生成器(axis generator)。缩放函数用于将输入的数据范围映射到输出的可视范围,轴生成器用于创建轴的外观和布局。
  2. 接下来,你可以使用D3的缩放行为(zoom behavior)来实现缩放和平移功能。缩放行为可以通过监听鼠标事件或触摸事件来触发缩放和平移操作。
  3. 在缩放行为的回调函数中,你可以根据需要对轴进行更新。在更新轴之前,你可以使用缩放函数来调整轴的比例和位置。
  4. 为了限制轴的移动范围,你可以在更新轴之前检查缩放函数的域(domain)是否超出了预设的范围。如果超出了范围,你可以通过调整缩放函数的域来限制轴的移动。

以下是一个示例代码,演示了如何在D3 v5中实现缩放后限制轴移动:

代码语言:txt
复制
// 创建缩放函数和轴生成器
var xScale = d3.scaleLinear()
  .domain([0, 100]) // 输入数据范围
  .range([0, width]); // 输出可视范围

var xAxis = d3.axisBottom(xScale);

// 创建缩放行为
var zoom = d3.zoom()
  .scaleExtent([1, 10]) // 缩放范围
  .on("zoom", zoomed);

// 创建SVG容器
var svg = d3.select("body")
  .append("svg")
  .attr("width", width)
  .attr("height", height)
  .call(zoom);

// 创建轴
var axis = svg.append("g")
  .attr("transform", "translate(0," + height / 2 + ")")
  .call(xAxis);

// 缩放行为的回调函数
function zoomed() {
  // 更新缩放函数的域
  var newXScale = d3.event.transform.rescaleX(xScale);

  // 检查缩放函数的域是否超出范围
  if (newXScale.domain()[0] < 0) {
    newXScale.domain([0, newXScale.domain()[1]]);
  }
  if (newXScale.domain()[1] > 100) {
    newXScale.domain([newXScale.domain()[0], 100]);
  }

  // 更新轴
  axis.call(d3.axisBottom(newXScale));

  // 更新其他可视化元素
  // ...
}

在这个示例中,我们创建了一个线性缩放函数(xScale)和一个底部轴生成器(xAxis)。然后,我们创建了一个缩放行为(zoom),并将其应用于SVG容器。在缩放行为的回调函数(zoomed)中,我们更新了缩放函数的域,并根据新的缩放函数更新了轴。通过检查缩放函数的域是否超出了预设的范围,我们可以限制轴的移动范围。

请注意,这只是一个简单的示例,实际应用中可能需要根据具体需求进行适当的修改和扩展。另外,推荐的腾讯云相关产品和产品介绍链接地址与本问题无关,故不提供。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

CAD常用基本操作

CAD常用基本操作 1 常用工具栏的打开和关闭:工具栏上方点击右键进行选择 2 动态坐标的打开与关闭:在左下角坐标显示栏进行点击 3 对象捕捉内容的选择:A在对象捕捉按钮上右键点击(对象捕捉开关:F3) B 在极轴选择上可以更改极轴角度和极轴模式(绝对还是相对上一段线) 4 工具栏位置的变化:A锁定:右下角小锁;工具栏右键 B 锁定情况下的移动:Ctrl +鼠标移动 5 清楚屏幕(工具栏消失):Ctrl + 0 6 隐藏命令行:Ctrl + 9 7 模型空间和布局空间的定义:模型空间:无限大三维空间 布局空间:图纸空间,尺寸可定义的二位空间 8 鼠标左键的选择操作:A 从左上向右下:窗围 B 从右下向左上:窗交 9 鼠标中键的使用:A双击,范围缩放,在绘图区域最大化显示图形 B 按住中键不放可以移动图形 10 鼠标右键的使用:A常用命令的调用 B 绘图中Ctrl + 右键调出捕捉快捷菜单和其它快速命令 11 命令的查看:A 常规查看:鼠标移于工具栏相应按钮上查看状态栏显示 B 命令别名(缩写)的查看:工具→自定义→编辑程序参数(acad.pgp) 12 绘图中确定命令的调用:A 鼠标右键 B ESC键(强制退出命令) C Enter键 D 空格键(输入名称时,空格不为确定) 13 重复调用上一个命令: A Enter键 B 空格键 C 方向键选择 14 图形输出命令:A wmfout(矢量图) B jpgout/bmpout(位图)应先选择输出范围 15 夹点的使用:A蓝色:冷夹点 B 绿色:预备编辑夹点 C红色:可编辑夹点 D 可通过右键选择夹点的编辑类型 E 选中一个夹点之后可以通过空格键依次改变夹点编辑的命令如延伸,移动或比例缩放(应注意夹点中的比例缩放是多重缩放,同一图形可在选中夹点连续进行多次不同比例缩放) 16 三维绘图中的旋转:按住Shift并按住鼠标中键拖动 17 . dxf文件:表示在储存之后可以在其它三维软件中打开的文件 18 . dwt文件:图形样板文件,用于自定义样板 19 . dws文件:图形标准文件,用于保存一定的绘图标准 20 对文件进行绘图标准检查并进行修复:打开CAD标准工具栏(工具栏右键)→配置(用于添加自定义的绘图标准;检查(用于根据添加的标准修复新图纸的标准))有缘学习更多+谓ygd3076考证资料或关注桃报:奉献教育(店铺) 21 绘图中的平行四边形法则(利用绘制四边形绘制某些图形) A两条直线卡一条直线,绘制一个边直线后,通过平移获取另一边直线 B 在圆中绘制相应长度的弦,现在圆心处绘制相同长度的直线,再通过平移获得 22 自定义工具栏命令 CUI或输入Toolbar 其中命令特性宏中的^C^表示取消正在执行的操作 22 循环选择操作方法:Shift+空格 用于图形具有共同边界的情况下的选择 23 系统变量 Taskbar的作用:0表示在工具栏上只显示一个CAD窗口,1表示平铺显示所有CAD窗口

05

Unity Shader常用函数,标签,指令,宏总结(持续更新)

UnityObjectToClipPos(v.vertex); 最基本的顶点变换,模型空间 ==》裁剪空间 mul(unity_ObjectToWorld, v.vertex); 顶点:模型空间 ==》世界空间,多用于顶点着色器 UnityObjectToWorldNormal(v.normal); 法线:模型空间 ==》世界空间,多用于顶点着色器,float3(归一化后fixed3) UnityWorldSpaceLightDir(i.worldPos.xyz); 仅前向渲染,世界空间顶点位置 ==》世界空间光源方向,多用于片元着色器,一般会顺带归一化(fixed3) UnityWorldSpaceViewDir(i.worldPos.xyz); 世界空间顶点位置 ==》世界空间视线方向,多用于片元着色器,一般会顺带归一化(fixed3) P.S.一般[0,1]范围内的尽量用低精度fixed类型,如单位矢量,颜色等 Tags{"lightmode"="forwardbase"}(字符串不区分大小写,编译时会自动转为所有字母大写) 指示光照模型为前向渲染的基本模式 #include "UnityCG.cginc"(字符串不区分大小写,编译时会自动转为所有字母大写) 包含大量基本内置函数,宏等,一般自带 #include "lighting.cginc"(字符串不区分大小写,编译时会自动转为所有字母大写) 包含基本光照属性,如 _LightColor0 UNITY_LIGHTMODEL_AMBIENT(使用大写) 环境光,一般取前三个分量rgb(xyz);基本光照模型需要有环境光,漫反射,高光等 基本纹理&法线贴图: TRANSFORM_TEX(v.uv, _MainTex); 基本纹理变换,用于顶点着色器,相当于v.uv*_MainTex_ST.xy + _MainTex_ST.zw;(其中xy存缩放,zw存偏移,对应面板参数);_MainTex_ST需额外定义 tex2D(_MainTex, i.uv); 基本纹理采样,用于片元着色器;一般会定义染色属性并与之相乘得到反射率(albedo),反射率作为环境光和漫反射计算的因子 UnpackNormalWithScale(packedNormal, _BumpScale); 反映射法线贴图采样结果得到顶点空间中的法线方向,同时计算凹凸映射的缩放;packedNormal为法线贴图直接采样结果,_BumpScale为凹凸缩放值;法线贴图必须进行导入设置为Normal Map UnityObjectToWorldDir(v.tangent.xyz); 方向(切线):模型空间 ==》世界空间,多用于顶点着色器 cross(worldNormal, worldTangent)*v.tangent.w 计算副法线,cross(,)两个向量叉积,用于得知两个坐标轴求第三个坐标轴朝向,w控制朝向的正负;知道三个朝向就可以构造变换矩阵了 TANGENT_SPACE_ROTATION 得到从模型空间到顶点空间的变换矩阵rotation,随后可直接进行如下计算,例如: mul(rotation, ObjSpaceLightDir(v.vertex)); 模型空间顶点位置 ==》模型空间光源方向==》顶点空间光源方向 mul(rotation, ObjSpaceViewDir(v.vertex)); 模型空间顶点位置 ==》模型空间视线方向==》顶点空间视线方向 多光源&前向渲染&光照衰减: Tags{"lightmode"="forwardbase"}(第一个Pass,全局性通用计算,只计算一次,不用开启混合) Tags{"lightmode"="forwardadd"}(第二个Pass,根据光源数目不同可能多次计算,需开启混合) 前向渲染的两种标签,分别位于不同的两个Pass,指示每个Pass的光照模式 #pragma multi_compile_fwdbase #pragma multi_compile_fwdadd 前向渲染的两种指令,只有每个Pass配置正确指令才可能得到正确的光照变量,如光照衰减值 UNITY_LIGHT_ATTENUATION(atten, i, i.worldPos.xyz); 用于第二个Pass分别计算每个光源的衰减,atten为输出的衰减值,i为片元着色器的输入结构体,其内部数学运算根据各个光照的类型不同复杂度不一,具体可参考:https://github.com/candycat1992/Unity_Shaders_Book/issues/47 接收投影: SHADOW_COORDS(idx) 声明阴影纹理采样的坐标,用于顶点着色器输出结构体,idx为下一个可用插值寄存器(TEXCOORD)的索引值 TRANSFER_SHADOW(o); 用于在顶点着色器

01

数据可视化工具d3_前端3d可视化

近年来,可视化越来越流行,许多报刊杂志、门户网站、新闻媒体都大量使用可视化技术,使得复杂的数据和文字变得十分容易理解,有一句谚语“一张图片价值于一千个字”。D3 正是数据可视化工具中的佼佼者,基于 JavaScript 开发,项目托管于 GitHub。从 D3诞生以来,不断受到好评,在 GitHub 上的项目仓库排行榜也不断上升。可视化越来越流行,许多报刊杂志、门户网站、新闻、媒体都大量使用可视化技术,使得复杂的数据和文字变得十分容易理解,有一句谚语“一张图片价值于一千个字”,的确是名副其实。各种数据可视化工具也如井喷式地发展,D3 正是其中的佼佼者。D3 的全称是(Data-Driven Documents),顾名思义可以知道是一个被数据驱动的文档。听名字有点抽象,说简单一点,其实就是一个 JavaScript 的函数库,主要是用来做数据可视化。

04
领券