不知道大家会不会跟我一样遇到这样的问题，在之前做的力导向图的基础上加上缩放功能的时候，拖动节点时整体会平移不再是之前酷炫的效果（失去了拉扯的感觉！）。天啊，简直不能接受如此丑X的效果。经过不懈的努力终于解决了这个问题。 以下是事情发生的原因及解决的代码： var zoom = d3.behavior ...
分类：
Web程序 时间：
2020-03-13 10:20:47
阅读次数：
545
zoom缩放案例 源码：https://github.com/HK-Kevin/d...；demo：https://hk-kevin.github.io/d3...； 原理：通过zoom事件来重新绘制x轴scale，同时获得此时scale，在zoom事件的时候调用函数，将每个数据点的xScale重新 ...
分类：
Web程序 时间：
2020-03-13 10:18:00
阅读次数：
80
我使用D3库来创建绘图应用程序。 我需要在用户单击的坐标上绘制对象（为了简单起见）。问题是当用户使用平移&缩放和移动视口。然后对象是错误的位置的地方（我想问题是事件坐标是相对于svg元素而不是g，所以他们是计算没有适当的转换）。 < pre> $（'svg'）。on（'click'，function ...
分类：
其他好文 时间：
2020-03-12 23:16:58
阅读次数：
76
//鼠标坐标：在SVG经过缩放、偏移、ViewBox转换后，鼠标坐标值 var mouseCoord = { x : 0., y : 0. }; //用户坐标：相对于原始SVG,坐标位置 var userCoord = { x : 0., y : 0. }; var cRadius = 4.; // ...
分类：
其他好文 时间：
2020-03-12 21:48:40
阅读次数：
152
SVG元素可以通过缩放，移动，倾斜和旋转来变换-类似HTML元素使用CSS transform来变换。然而，当涉及到坐标系时这些变换所产生的影响必然有一定差别。在这篇文章中我们讨论SVG的transform属性和CSS属性，包括如何使用，以及你必须知道的关于SVG坐标系变换的知识。 这是我写的SVG ...
分类：
其他好文 时间：
2020-03-12 21:47:23
阅读次数：
58
一个应用场景是，点击一条路径，显示该路径的控制点。因为有transform变形( 平移、缩放、倾斜、旋转等变换)，所以获取变形后的新坐标需要计算。 纯数学的方法，就是用2D变换矩阵的一些公式去运算，过程稍微有点复杂。 不过好在SVG已经提供了丰富的API将一些矩阵运算封装了，非常实用，下面是Demo ...
SVG中DOM元素的偏移与缩放都是基于SVG元素的左上角，所以如何理解与计算SVG中元素的真实位置就比较难，下面的例子都以圆(circle)为例。 1.缩放假定缩放的比例为s，执行缩放后，圆的圆心坐标由(cx, cy)变为(cx * s, cy * s) 2. 偏移假定偏移的距离为(x1, y1), ...
分类：
其他好文 时间：
2020-03-12 21:42:05
阅读次数：
55
一，一个简单游戏的运行思维 1. 一个游戏是如何运行的？为什么《飞机大战》中的飞机可以在屏幕中来回穿梭？ 2.游戏运行中间的每一种行为，玩家的输入，游戏中反馈给玩家的输出，对应的操作为什么能实现？为什么不会自动结束游戏？ 首先，我们把游戏“缩放”一下，我们可以认为游戏的运行即是一个大的循环；whil ...
分类：
编程语言 时间：
2020-03-12 14:09:08
阅读次数：
63
canvas默认宽高是300*150px <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>canvas</title> <style> .canvas{border:1px solid pink;} </st ...
分类：
其他好文 时间：
2020-03-11 01:21:44
阅读次数：
73
一、问题 svg画面跑在分辨率低的电脑上，导致不能完全显示。 二、要求 svg要能够根据电脑的屏幕大小自动缩放至适配电脑的尺寸。 三、实现 1.获取本机窗口高度、宽度 let clientWidth = document.documentElement.clientWidth, clientHeig ...
分类：
其他好文 时间：
2020-03-10 14:22:39
阅读次数：
152
