D3之svg transform 与 css3 transform 区别与联系

　　D3就不用多介绍了，在数据可视化界属于大佬级别的js库。在这里主要想记录一下在写程序期间遇到的一个问题。

　　如下图所示，想完成主视图在小地图上的映射，小地图的白色矩形框用来代表当前主视图可见区域，主视图可以进行缩放和平移。因此涉及到一些变换计算。

mainChart.group = mainChart.svg.append("g").attr("transform", "translate(" + mainChart.width / 2 + "," + mainChart.height / 2 + ")");/*mainChart.group的变换导致mainChart.g的坐标原点并不在左上角，而在svg的坐标变换中不能设置变换的相对坐标，但是css3可以设置相对坐标（attr使用svg变换，style使用css3变换）*/mainChart.g = mainChart.group.append("g").style("transform-origin", (-mainChart.width / 2) + "px " + (-mainChart.height / 2) + "px");mainChart.svg_links = mainChart.g.selectAll(".links") .data(mainChart.result_links) .enter() .append("path") .attr("id", function (d, i) { return "link_" + i; }) .attr("stroke-opacity", mainChart.now_link_opacity) .attr("stroke", mainChart.now_link_color) .attr("stroke-width", mainChart.now_link_size) .attr("fill", "none") .attr("d", mainChart.line); mainChart.svg_nodes_g = mainChart.g.selectAll(".nodes") .data(mainChart.result_nodes.filter(function (d) { return !d.children; })) .enter() .append("g") .attr("id", function (d) { return "node_" + d.id; });

最开始是使用一个g元素将这个视图平移至主视图的正中心，然后再添加一个g元素用来存放点和边的绘制。此时，第二个g元素的坐标原点是以父节点平移后的位置为坐标原点，即主视图正中心为坐标原点。而在小地图中，矩形的变换是以小地图svg的右上角为坐标原点，导致两个坐标原点不能匹配，因此需要完成对坐标原点的修正。而svg的变换中无法设置transform-origin属性，所以采用css3，将第二g元素的坐标原点重新设置为主视图的左上角，从而保持一致。

关于svg的transform和css3的transform区别和联系：http://www.zhangxinxu.com/wordpress/2015/10/understand-svg-transform/

转载于:https://www.cnblogs.com/RainyBear/p/8329174.html

D3之svg transform 与 css3 transform 区别与联系相关推荐

html transform属性,css3 transform属性详解
CSS3变形是一些效果的集合,比如平移translate() .旋转rotate().缩放scare()和倾斜skew()效果,每个效果都被称作为变形函数(Transform Function),它们 ...
css3 transform文字,CSS3 transform 字体模糊问题
使用 Vue Material 的 Dialog 做了一个弹出框,弹出框内动态绑定了几个数据,页面效果一出来 What the fuck? 马赛克? Vue Material 的组件肯定没问题,应该自 ...
css让div旋转,CSS3 transform 属性旋转 div 元素
div { transform:rotate(7deg); -ms-transform:rotate(7deg); /* IE 9 */ -moz-transform:rotate(7deg); /* ...
理解CSS3 transform中的Matrix(矩阵)
一.哥,我被你吓住了打架的时候会被块头大的吓住,学习的时候会被奇怪名字吓住(如"拉普拉斯不等式").这与情感化设计本质一致:界面设计好会让人觉得这个软件好用! 所以,当看到上面& ...
【CSS3】理解CSS3 transform中的Matrix(矩阵)
理解CSS3 transform中的Matrix(矩阵) by zhangxinxu from http://www.zhangxinxu.com 本文地址:http://www.zhangxinxu ...
CSS3 Transform变形理解与应用
CSS3 Transform变形理解与应用 Transform:对元素进行变形: Transition:对元素某个属性或多个属性的变化,进行控制(时间等),类似flash的补间动画.但只有两个关键贞. ...
CSS3 Transform 【3D 】
三维变换使用基于二维变换的相同属性,如果您熟悉二维变换,你们发现3D变形的功能和2D变换的功能相当类似.CSS3中的3D变换主要包括以下几种功能函数: 3D位移:CSS3中的3D位移主要包括trans ...
css3 transform animation 动画小结
css3 transform animation 动画小结最近在策划自己的博客,本来是想写一个酷炫可以让人玩的,全是动画的页面, 结果哎 - - 可以说是非常失败了,这是一个刷牙的动画,变色的 ...
CSS3 Transform详解
CSS3 Transform 简介: Css3 transform 允许元素在2维以及3维空间进行变换.具体包括三大块,2D transform.3Dtransform.以及SVG transform ...
基于css3 transform实现散乱的照片排列
分享一款基于css3 transform实现散乱的照片排列.这是一款简单零散的css3相册排列特效下载.效果图如下: 在线预览源码下载实现的代码. html代码: <div class ...

D3之svg transform 与 css3 transform 区别与联系

D3之svg transform 与 css3 transform 区别与联系相关推荐

最新文章

热门文章