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/

D3之svg transform 与 css3 transform 区别与联系的更多相关文章

  1. 【CSS3】 理解CSS3 transform中的Matrix(矩阵)

    理解CSS3 transform中的Matrix(矩阵) by zhangxinxu from http://www.zhangxinxu.com 本文地址:http://www.zhangxinxu ...

  2. 理解CSS3 transform中的Matrix(矩阵)

    一.哥,我被你吓住了 打架的时候会被块头大的吓住,学习的时候会被奇怪名字吓住(如“拉普拉斯不等式”).这与情感化设计本质一致:界面设计好会让人觉得这个软件好用! 所以,当看到上面“Matrix(矩阵) ...

  3. 理解CSS3 transform中的Matrix(矩阵)——张鑫旭

    by zhangxinxu from http://www.zhangxinxu.com本文地址:http://www.zhangxinxu.com/wordpress/?p=2427 一.哥,我被你 ...

  4. CSS3 Transform变形理解与应用

    CSS3 Transform变形理解与应用 Transform:对元素进行变形:Transition:对元素某个属性或多个属性的变化,进行控制(时间等),类似flash的补间动画.但只有两个关键贞.开 ...

  5. css3 transform中的matrix矩阵

    CSS3中的矩阵CSS3中的矩阵指的是一个方法,书写为matrix()和matrix3d(),前者是元素2D平面的移动变换(transform),后者则是3D变换.2D变换矩阵为3*3, 如上面矩阵示 ...

  6. CSS3 transform详解,关于如何使用transform

    transform是css3的新特性之一.有了它可以box module变的更真实,这篇文章将全面介绍关于transform的使用. transform的作用 transform可以让元素应用 2D ...

  7. 小心 CSS3 Transform 引起的 z-index "失效"

    https://www.douban.com/note/343402554/ http://www.jb51.net/css/255811.html 最后我直接removeClass;把transfo ...

  8. CSS3 transform rotate(旋转)锯齿的解决办法

    -moz-transform: rotate(5deg);-webkit-transform: rotate(5deg); 把图片旋转了5度.本以为轻而易举,可遇到了问题.在Fireofx中显示正常, ...

  9. CSS3 transform对普通元素的N多渲染影响

    一.一入transform深似海 一个普普通通的元素,如果应用了CSS3 transform变换,即便这个transform属性值不会改变其任何表面的变化(如scale(1), translate(0 ...

随机推荐

  1. 第1天 Mark Down 学习及DOS命令

    Markdown学习 标题 "#加空格"几个#就表示几级标题 字体 helloworld!一两个两个*号 helloworld!一边一个*号 helloworld! 一边三个号 h ...

  2. 一台电脑安装两个不同版本的MySQL

    背景: 本人电脑上已有mysql-8.0.12-winx64,并且可以使用.但由于工作需要,得使用mysql-5.5.59-winx64,已有mysql-5.5.59-winx64的解压好的安装包 参 ...

  3. Python入门 -- 001

    在Windows系统下安装python: 从Python的官方网站(http://www.python.org/)下载最新版的程序安装包. 安装完成后设置路径,使得在Windows系统的CMD中能够通 ...

  4. JS进度条顺滑版实现

    进度条不顺滑 相信大多前端同学都自己写过音频.视频播放器,实现并不复杂.最近在小程序里,做了一个类似微博刷视频的需求.其中有一部分功能需要实现自定义进度条,在做完第一版之后发现进度条不顺滑,而后想查查 ...

  5. PHP 后台数组数据 传输给前台JS 使用

    一. PHP: $a = array('aaa','bbb'); $a= json_encode($a); JS: var a_json = {$a};   //此处a_json数组便可使用 二. H ...

  6. 【水】Dev-c++黑暗模式教程

    前言 大家有没有觉得盯着Dev-c++那个白花花的背景盯久了之后会觉得眼睛不舒服-- 本人今天就来给大家带来一个黑暗模式的Dev-c++,可以让眼睛没那么难受(本人亲测有效) 效果如下图(猛男警告): ...

  7. SpringBoot - Bean validation 参数校验

    目录 前言 常见注解 参数校验的应用 依赖 简单的参数校验示例 级联校验 @Validated 与 @Valid 自定义校验注解 前言 后台开发中对参数的校验是不可缺少的一个环节,为了解决如何优雅的对 ...

  8. 字节跳动Android实习面试难吗,应该如何应对?

    字节跳动的面试难不难其实很难去非常准确的定义,但是能肯定的一点是,字节跳动的面试题都很有水平,真正考察了该岗位在以后工作中需要的能力. 大学学的Java后面又自学Android方向,跟着老师在实验室做 ...

  9. Linux连接工具final配置

    Linux连接工具 putty .CRT.XShell 在terminal里面敲不太方便,所以需要一款连接工具 这是一款美观医用的网络服务管理软件 安装final shell Windows版下载地址 ...

  10. system V信号量和Posix信号量

    一.函数上的区别 信号量有两种实现:传统的System V信号量和新的POSIX信号量.它们所提供的函数很容易被区分:对于所有System V信号量函数,在它们的名字里面没有下划线.例如,应该是sem ...