Div & Svg可视化探索笔记

最近因为工作需要做了点HTML5可视化研究如下
为什么简书没有字体颜色作为一个设计师很不爽
第一次发文有写错的地方还请诸位高手多多包涵

问题陈述

设想，要在页面中生成大量的简单图形，比如10万个方块，并对它们进行拖拽操作。
基本思路有三种方式，传统Div，Svg，与Canvas。
为了加拖拽，暂时没有用canvas。
因为canvas无法生成dom节点，不存在id这种属性，需要通过判断鼠标位置来获取元素再进行操作。虽然写个isMouseinObj()的function也不是不行，但总觉得以后针对某对象单独处理会夜长梦多（主要还是懒）。。。不过从生成图形角度讲，canvas理论上是最快的。

因为贪生怕死担心Dom过多死机，准备先分区生成方块，于是：
一个简图，整体划分如下，设两个input框的值分别为m, n，每个蓝块包括n个绿块。点击每个蓝块可在下方生成n个绿块。
点击GenAll可一次性生成m*n个绿块。点击Drag可对绿块进行拖拽。

js-1.png

模拟开始。

Div+Html5 Drag & Drop

首先是用div模拟方块。因为比较熟悉写起来也简单。

初始化Div
js循环批量生成。

for(var i=0;i<n;i++) {
    var box = document.createElement("div");
    box.className = 'abox';
    var id = i+1;
    box.id = 'box'+id;
    box.innerHTML = 'Box'+id;
    $('#boxdetail').append(box);
    delete box;
}

Div的拖拽方式可以分成两种。

应用插件拖拽
偷懒大法，用jquery-ui的话，只需要一句话。给要拖拽的元素加上draggable()即可。

<script type="text/javascript" src="jquery-ui.js"></script>

$("#drag").click(function(){
    alert('now you can drag');
    $(".abox").draggable(); 
});

js-2.png

Jquery-ui的draggble还有很多其他参数，请参考api文档。

Html原生事件拖拽
Html5有原生Drag and Drop事件，堪称神器。
被拖动对象可以触发的事件有：
(1)ondragstart：源对象开始被拖动
(2)ondrag：源对象被拖动过程中(鼠标可能在移动也可能未移动)
(3)ondragend：源对象被拖动结束
拖动源对象可以进入到上方的目标对象可以触发的事件有：
(1)ondragenter：目标对象被源对象拖动着进入
(2)ondragover：目标对象被源对象拖动着悬停在上方
(3)ondragleave：源对象拖动着离开了目标对象
(4)ondrop：源对象拖动着在目标对象上方释放/松手
添加事件的方式也多种多样，以ondrop为例：
HTML 中：<element ondrop="myScript">
JavaScript 中：object.ondrop=function(){myScript};
JavaScript 中, 使用 addEventListener() 方法:object.addEventListener("drop",myScript);

现在假定一种新情形：绿色方块只能拖拽到虚线框之内。

js-3

默认情况下，Html元素均不可拖拽，所以需要设置拖拽元素的draggable属性为true。同时，默认无法将元素放置到其他元素中，所以需要event.preventDefault()设置允许放置。
本例中，为class为abox的绿方块添加draggable。
为class为wrap的虚线框添加preventDefault。
之后通过dataTransfer传输数据，实现box的移动。

$("#drag").click(function(){
    alert('now you can drag');
    $(".abox").attr('draggable',true); //设置可拖动
    boxes=$(".abox")
    for(i=0;i<boxes.length;i++){ //循环使每个box均可拖动
        boxes[i].ondragstart = function(event) {
            event.dataTransfer.setData("Text",event.target.id); //存储
            console.log('drag', event.target.id)
        }
    }
    document.ondragover = function(event) {
        if(event.target.className == "awrap"){
            event.preventDefault();  //设置可放置
        }
    }
    document.ondrop = function(event) {
        if(event.target.className == "awrap"){
            event.preventDefault();
            var data=event.dataTransfer.getData("Text");
            console.log('data', data);
            event.target.appendChild(document.getElementById(data)); //放置
        }
    }
});

js-4.png

Svg

由于Svg也是直接在Html中生成Dom节点，理论上Div所能实现的功能它都可以实现，并且绘图效果更佳。

初始化Svg
同Div的生成方式类似，Svg需要先生成个画布，并定义长宽。

var svg = document.createElementNS('http://www.w3.org/2000/svg','svg'); 
svg.setAttribute("height",'100%'); 
svg.setAttribute("width",'100%');

然后生成Svg元素，并设置其属性。

for (var i = 0; i < Count; i++) {
    var rect = document.createElementNS('http://www.w3.org/2000/svg','rect'); 
    rect.setAttribute( .... ); 
    svg.appendChild(rect); 
}

应用插件拖拽
svg.draggable.js是个跟Jquery ui draggable差不多的插件。也是引入之后加个draggable属性即可随意拖拽。

<script type="text/javascript" src="svg.min.js"></script>
<script type="text/javascript" src="svg.draggable.js"></script>

循环生成Svg方块并添加拖拽属性。

var svg = SVG('boxdetail').size(1000, 400);
for (var i = 0; i < n; i++) {
    var rect = svg.rect(80, 20);
    rect.x(100 * i);
    rect.fill('#e1fbdd'); 
    rect.id('box'+i);
    rect.draggable({ //设定只能在画布大小内拖动
        minX: 0, 
        minY: 0, 
        maxX: 1000, 
        maxY: 400
    });
}

但这种方式有个问题，就是——慢。当生成仅10000个方块时，效率便低的不可估量。
然而Svg无法应用Html5原生的Drag and Drop事件。

鼠标事件触发拖拽
一种基本方法，是利用鼠标的mousedown, mousemove, mouseup事件检测鼠标点击、移动、松开，并记录鼠标坐标位置，从而改变被拖拽元素坐标。

$("#drag").click(function(){
    alert('now you can drag');
    var selectedElement = null;
    var currentX = 0;
    var currentY = 0;
    $("#mysvg > rect").mousedown(function (e) {
        // 选中拖拽元素，记录原始坐标
        currentX = e.clientX;
        currentY = e.clientY;
        selectedElement = e.target;
    }).mousemove(function (e) {    
        // 更新坐标
        if (selectedElement) {
            var dx = parseInt(selectedElement.getAttribute("x")) + e.clientX - currentX;
            var dy = parseInt(selectedElement.getAttribute("y")) + e.clientY - currentY;
            currentX = e.clientX;
            currentY = e.clientY;
            selectedElement.setAttribute("x", dx);
            selectedElement.setAttribute("y", dy);
        }
    }).mouseup(function (e) {
        // 取消元素选中状态
        selectedElement = null;  
    });
});

相比于引用插件，这样的效率提高了不少。

js-5.png

Div与Svg效率对比

从结果上看，在数量少时，针对方块这种简单图形的简单操作Div和Svg均可胜任。然而设置了总共生成100000个方块，发现单从生成的角度，Svg的渲染用时大约是Div的1/2（这里指Dom中直接绘制Svg而非通过js插件绘制Svg）。
加上拖拽功能后，用Html5原生拖放事件的Div，及用鼠标事件的Svg，明显快快快快于应用js插件拖放的效率。于是乎插件虽然强大但对于大量节点的处理实在过于缓慢。
于是在图形化上还是应用Svg更舒畅一些。
但有一个尚未解决的问题。
应用鼠标事件拖动Svg，当鼠标移动过快时，mousemove事件无法触发，导致移动效果不能实现。粗略查了下似乎可以添加透明背景层接收所有触发事件，不过还没有深入研究。
这篇就到此吧。等解决了mousemove的bug再更新后续。
(´・ω・`)

Div & Svg可视化探索笔记

问题陈述

Div+Html5 Drag & Drop

Svg

Div与Svg效率对比

推荐阅读更多精彩内容