svg + d3
为了实现元素的添加,删除,拖拽,左键点击,右键单击,悬浮等功能,使用了d3 + svg 的技术来实现界面。
最开始是采用canvas,但是由于功能原因放弃了该技术,可以看下 canvas简介
另附:canvas和svg区别
首先,下载d3.min.js和snap.svg-min.js
如果使用的是bower,
安装d3,bower --allow-root install -S d3
安装svg,bower --allow-root install -S snap.svg
然后页面再引入。
新建画布主要有两种方式,
(1)html页面中
<svg id="svg_order" xmlns="http://www.w3.org/2000/svg" version="1.1" width="622px" height="417px">
</svg>
js中
var svg = Snap("#svg_order");
var rect = svg.paper.rect(hengwidth*widthOffest,shuwidth*heightOffest,imageWidth,imageHeight,imageRadius);
var text = svg.paper.text((hengwidth*widthOffest)+imageWidth/2-5, (shuwidth*heightOffest)+imageHeight/2, i+1);
var group = svg.paper.g(rect, text).attr({id:"groupId"+i,class:"groupClass"});
(2)html页面中
<div id="main_client_order">
</div>
js中
var svg = null; /*构建基础画布*/
function drawPanel(screenWidth, screenHeight) {
svg = d3.select('#main_client_order')
.append('svg:svg')
.attr('width', screenWidth+100)
.attr('height', screenHeight+100)
.style("margin-left", "20px")
.style("margin-top", "20px")
.attr("id", "orderId");
}
var addRect = svg.append("g");
addRect.append("rect");
addRect.append("text");
在画布上面开始画图
var addRect = svg.append("g");
addRect.append("rect");
addRect.append("text");
addRect.append("rect").style('visibility', 'hidden');(标记1)
addRect = addRect.call(drag);//给元素添加拖拽事件,拖拽事件需要定义在此代码之前。
给元素添加事件
悬浮事件和右键事件
addRect.on("contextmenu", function (data, index) {
//右键事件
d3.event.preventDefault();
}).on("mouseover", function (data, index) {
//悬浮事件 over
}).on('mouseleave', function () {
//悬浮事件 leave
});
拖拽事件(此方法要放在元素添加拖拽事件之前)
var drag = d3.behavior.drag()
.on('dragstart', function (d) {
//拖拽开始事件,需要通过标志位区分点击按下时和拖拽开始。
}).on('drag', function (d) {
//拖拽中事件,此时可以限制拖拽的边缘范围。
}).on('dragend', function (d) {
//拖拽结束事件,需要通过标志位区分点击松起时和拖拽结束。
});
事件实现概述
在界面中画图时,需要边画边在页面存入数据,我存入的数据是一个二维数组,a[i][j] i表示的是行 j表示的是列
var rect = "{id:'inner_" + id + "',x:" + startX + ",y:" + startY + ",type:" + colortype + ",highlight:"+highlighttype+"}";
var jsonRect = eval('(' + rect + ')');
var a1 = startX / widthOffset;
var a2 = startY / heightOffset;
if (gData[a2] == null) {
gData[a2] = new Array();
}
//存储元素的id,x,y
gData[a2][a1] = jsonRect;
//存储id备份值 只存储id (标记2)
var rect_id_bak = "{id:'inner_" + id + "'}";
var jsonRect_id_bak = eval('(' + rect_id_bak + ')');
if (gDataId_bak[a2] == null) {
gDataId_bak[a2] = new Array();
}
gDataId_bak[a2][a1] = jsonRect_id_bak;
只所以存储一个备份id,是为了保存行列元素与id值的对应。也就是第几行第几列的元素的id值。
针对以上的两次标记,解释如下:
1.g元素是空元素,无法捕捉悬浮,点击,拖拽等事件。需要在等位置填充一个元素。目前是采用相同位置,相同长宽的方块来填充该位置。(对应标记1)
The g element is just an empty container which cannot capture click events,then appending an invisible rectangle to it as a place to hover over 来源:d3-js-mouseover-event-not-working-properly-on-svg-group
2.g元素没有x,y值,移动g元素只能用transform(x,y)的方式。(对应标记2)
The <g>-element doesn't have x and y attributes. To move the contents of a <g>-element you can only do so using the transform attribute, using the "translate" function, like this: transform="translate(x,y)".来源:SVG g element
鼠标点击的mouse()方法只能获取在画布中的位置,根据该位置的行列,x除以长得到i,y除以宽得到j,然后再从备份数据gDataId_bak中,找到对应的id,然后再根据id在html中获取该元素的偏移量,也就是transform(x,y)中的x,y,相加之后得到实际位置的x,y,x除以长得到i,y除以宽得到j,然后再从gData中获取真正的元素。
需要注意几点:
1.拖拽中,d3.event.x d3.event.y可以获取真实位置信息。
2.d3.event.sourceEvent.button 可以区分左右键点击事件,0 是左键 2是右键
3.另附d3文档
svg + d3的更多相关文章
- D3+svg 案例
<!doctype html><html lang="en"><head> <meta charset="UTF-8" ...
- [D3] 2. Basics of SVG
1. svg should use 'fill' prop instead 'background-color'2. svg width & height no need 'px'3. att ...
- 【D3.V3.js系列教程】--(十五)SVG基本图形绘制
[D3.V3.js系列教程]--(十五)SVG基本图形绘制 1.path <!DOCTYPE html> <html> <head> <meta charse ...
- D3中的each() 以及svg defs元素 clipPath的使用
each() 方法允许我们定制对选择集中DOM元素的处理行为: selection . each ( func ) 参数 func 是调用者定义的函数,在d3中被称为 访问器/accessor . d ...
- D3.js & Data Visualization & SVG
D3.js & Data Visualization & SVG https://davidwalsh.name/learning-d3 // import {scaleLinear} ...
- angular7 + d3 显示svg
汇总一些之前没有注意到的问题 总体思路: app只是显示svg为主,接收后端推送的数据改变,显示变化后的svg. 因此,只用d3的数据绑定更新组件里<svg></svg>节点. ...
- 使用d3.v3插件绘制出svg图
众所周知,这个插件使用的svg技术,而IE8(包括IE8)之前的浏览器是不支持svg的 接下来看代码吧 从后台获取到带id和父id的目录数据[json格式] var module = requestU ...
- SVG基础图形和D3.js
使用D3.js画一个SVG 的 圆 circle 可以使用如下代码创建: <svg width="50" height="50"> <circ ...
- D3——绘制SVG图形-直方图
1.创建SVG元素 var svg = d3.select("body").append("svg"); 2.为SVG元素设置属性 svg.attr() .at ...
随机推荐
- docker学习(1) 安装
docker是啥就不多讲了,简言之就是更轻量.更牛叉的新一代虚拟机技术.下面是安装步骤: 一.mac/windows平台的安装 docker是在linux内核基础上发展而来的,无法直接运行在mac/w ...
- 外网访问内网工具ngrok tunnel 使用总结
需求分析 在软件开发测试过程中,我们会经常遇到需要网站部署测试.给客户演示.APP开发的调试这样的需求.通常的做法是申请一个域名和空间,将网站放到外网上给客户演示. 这种方法确实可行不过会有两点不好, ...
- web兼容学习分析笔记-margin 和padding浏览器解析差异
二.margin 和padding浏览器解析差异 只有默认margin的元素 <body>margin:8px margin:15px 10px 15px 10px(IE7) <b ...
- C#面向对象设计模式纵横谈——4.Builder 生成器模式(创建型模式)
动机 (Motivation) 在软件系统中,有时候面临着“一个复杂对象”的创建工作,其通常由各个部分的子对象用一定的算法构成:由于需求的变化,这个复杂对象的各个部分经常面临着剧烈的变化,但是它们组合 ...
- AndroidStudio开发环境配置-Windows
Android Studio开发环境配置-Windows 最近突发奇想,开始研究Android开发.开始时使用Eclipse作为开发IDE,结果各种不好使,首先下载和安装SDK,以及不同版本的Imag ...
- java--面向对象---访问属性
<第一节> private--只能用于成员变量和成员函数(限制于类而不是对象),即只能在本类中访问被定义为private 的变量 public-- protected-- <第二节& ...
- Bzoj3450 Tyvj1952 Easy
Time Limit: 10 Sec Memory Limit: 128 MBSubmit: 570 Solved: 428[Submit][Status][Discuss] Descriptio ...
- centeros:生产环境搭建
p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 12.0px "Helvetica Neue"; color: #e4af0a } p. ...
- Xamarin.ios 重新定位视图
//旋转手机重新定位视图 /// <summary> /// 重新定位视图 /// </summary> /// <param name="toInterfac ...
- Mac OSX:Powerline风格的zsh配置
需要的工具 iTerm,一个替代OSX自带终端的软件,基于iTerm才能实现上面的效果: oh-my-zsh,zsh是OSX上最强大的shell,没有之一,但是配置过程较为复杂,这个脚本能够帮你一键配 ...