为了实现元素的添加,删除,拖拽,左键点击,右键单击,悬浮等功能,使用了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的更多相关文章

  1. D3+svg 案例

    <!doctype html><html lang="en"><head> <meta charset="UTF-8" ...

  2. [D3] 2. Basics of SVG

    1. svg should use 'fill' prop instead 'background-color'2. svg width & height no need 'px'3. att ...

  3. 【D3.V3.js系列教程】--(十五)SVG基本图形绘制

    [D3.V3.js系列教程]--(十五)SVG基本图形绘制 1.path <!DOCTYPE html> <html> <head> <meta charse ...

  4. D3中的each() 以及svg defs元素 clipPath的使用

    each() 方法允许我们定制对选择集中DOM元素的处理行为: selection . each ( func ) 参数 func 是调用者定义的函数,在d3中被称为 访问器/accessor . d ...

  5. D3.js & Data Visualization & SVG

    D3.js & Data Visualization & SVG https://davidwalsh.name/learning-d3 // import {scaleLinear} ...

  6. angular7 + d3 显示svg

    汇总一些之前没有注意到的问题 总体思路: app只是显示svg为主,接收后端推送的数据改变,显示变化后的svg. 因此,只用d3的数据绑定更新组件里<svg></svg>节点. ...

  7. 使用d3.v3插件绘制出svg图

    众所周知,这个插件使用的svg技术,而IE8(包括IE8)之前的浏览器是不支持svg的 接下来看代码吧 从后台获取到带id和父id的目录数据[json格式] var module = requestU ...

  8. SVG基础图形和D3.js

    使用D3.js画一个SVG 的 圆 circle 可以使用如下代码创建: <svg width="50" height="50"> <circ ...

  9. D3——绘制SVG图形-直方图

    1.创建SVG元素 var svg = d3.select("body").append("svg"); 2.为SVG元素设置属性 svg.attr() .at ...

随机推荐

  1. docker学习(1) 安装

    docker是啥就不多讲了,简言之就是更轻量.更牛叉的新一代虚拟机技术.下面是安装步骤: 一.mac/windows平台的安装 docker是在linux内核基础上发展而来的,无法直接运行在mac/w ...

  2. 外网访问内网工具ngrok tunnel 使用总结

    需求分析 在软件开发测试过程中,我们会经常遇到需要网站部署测试.给客户演示.APP开发的调试这样的需求.通常的做法是申请一个域名和空间,将网站放到外网上给客户演示. 这种方法确实可行不过会有两点不好, ...

  3. web兼容学习分析笔记-margin 和padding浏览器解析差异

    二.margin 和padding浏览器解析差异 只有默认margin的元素 <body>margin:8px  margin:15px 10px 15px 10px(IE7) <b ...

  4. C#面向对象设计模式纵横谈——4.Builder 生成器模式(创建型模式)

    动机 (Motivation) 在软件系统中,有时候面临着“一个复杂对象”的创建工作,其通常由各个部分的子对象用一定的算法构成:由于需求的变化,这个复杂对象的各个部分经常面临着剧烈的变化,但是它们组合 ...

  5. AndroidStudio开发环境配置-Windows

    Android Studio开发环境配置-Windows 最近突发奇想,开始研究Android开发.开始时使用Eclipse作为开发IDE,结果各种不好使,首先下载和安装SDK,以及不同版本的Imag ...

  6. java--面向对象---访问属性

    <第一节> private--只能用于成员变量和成员函数(限制于类而不是对象),即只能在本类中访问被定义为private 的变量 public-- protected-- <第二节& ...

  7. Bzoj3450 Tyvj1952 Easy

    Time Limit: 10 Sec  Memory Limit: 128 MBSubmit: 570  Solved: 428[Submit][Status][Discuss] Descriptio ...

  8. centeros:生产环境搭建

    p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 12.0px "Helvetica Neue"; color: #e4af0a } p. ...

  9. Xamarin.ios 重新定位视图

    //旋转手机重新定位视图 /// <summary> /// 重新定位视图 /// </summary> /// <param name="toInterfac ...

  10. Mac OSX:Powerline风格的zsh配置

    需要的工具 iTerm,一个替代OSX自带终端的软件,基于iTerm才能实现上面的效果: oh-my-zsh,zsh是OSX上最强大的shell,没有之一,但是配置过程较为复杂,这个脚本能够帮你一键配 ...