svg实现多个元素拖拽

最新推荐文章于 2024-04-13 09:32:19 发布

乱搭巴士

最新推荐文章于 2024-04-13 09:32:19 发布

阅读量823

点赞数

分类专栏：个人学习_本科生 javascript

本文链接：https://blog.csdn.net/qq_45128278/article/details/103412754

版权

个人学习_本科生同时被 2 个专栏收录

61 篇文章 0 订阅

订阅专栏

javascript

3 篇文章 0 订阅

订阅专栏

下面使用到的index.css

path{
    stroke:black;
    stroke-width:3;
    fill:none;
    stroke-linecap: round;
}
svg {

}
p{
    text-align: center;
    font-family: "Arial", "Tahoma", "微软雅黑", "雅黑";
    font-weight: bold;
}
span{
    text-align: center;
}
#attr_select{
    display: flex;
    text-align: center;
    margin:0px auto;
    height:27px;
    text-align-last: center;
    font-family: "Arial", "Tahoma", "微软雅黑", "雅黑";
    font-weight: bold;
}

svg.select.css

.svg_select_points_lt{
    cursor: nw-resize;
}
.svg_select_points_rt{
    cursor: ne-resize;
}
.svg_select_points_rb{
    cursor: se-resize;
}
.svg_select_points_lb{
    cursor: sw-resize;
}
.svg_select_points_t{
    cursor: n-resize;
}
.svg_select_points_r{
    cursor: e-resize;
}
.svg_select_points_b{
    cursor: s-resize;
}
.svg_select_points_l{
    cursor: w-resize;
}

.svg_select_points_rot{
    stroke-width:1;
    stroke:black;
    fill: #F9FFED;
}

.svg_select_points_point{
    cursor: move;
}

.svg_select_boundingRect{
    stroke-width:1;
    fill:gray;
    stroke-dasharray:10 10;
    stroke:black;
    stroke-opacity:0.8;
    fill-opacity:0.1;
    pointer-events:none; /* This ons is needed if you want to deselect or drag the shape*/
}

普通版使用inputrange左右平移及中心缩放

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8"/>
    <title>自动报警系统</title>

    <style>
        #show1{

        }
        .close:hover{
            color: darkred;
        }
        .inputk{
            text-decoration:none;
            border: solid 1px #AC8F73;
            height: 21px;
        }
        .button{
            background-color:#E7D9CB;
            color:#AC8F73;
            text-align:center;
            text-decoration:none;
            display:inline-block;
            cursor: pointer;
            border: solid 1px #AC8F73;
            font-weight: bold;
            font-family: "Arial", "Tahoma", "微软雅黑", "雅黑";

        }
    </style>
    <script src="../../../static/js/jquery.js"></script>
    <script src="../../../static/js/echarts.js"></script>

    <script src="../../../static/js/echarts_demo.js"></script>

    <script src="../../../static/js/java_index.js"></script>
    <script src="../../../static/js/plain-draggable.min.js"></script>
    <script src="../../../static/js/svg.min.js"></script>
    <script src="../../../static/js/svg.draggable.min.js"></script>
    <link rel="stylesheet" href="../../../static/css/index.css">
</head>
<body style="background-color:#E7D9CB ">

<!--写名字-->
<div>
    <svg xmlns="http://www.w3.org/2000/svg" version="1.1"
         xmlns:xlink="http://www.w3.org/1999/xlink";
         style="width: 200px;height: 100px;margin-top: 0px;margin-left: 0px;position: absolute">
        <path d="M 50 30 L 53 38       M 35 38 L 71 38 M 35 38 L 34 70 L 33 88 L 32 91
        M 44 49 L 65 49 L 65 63 L 44 63 M 44 56 L 70 56 M 54 45 L 54 63
        M 45 74 L 63 74 L 63 84 L 45 84 Z"/>
        <path d="M 100 32 L 99 50 L 98 60 L 97 71 L 110 90 M 94 40 L 120 40 M 112 40 L 110 56 L 109 68 L 103 90
        M 150 32 L 128 34 L 124 35 M 125 40 L 128 46 M 134 40 L 137 46 M 147 40 L 144 46
        M 125 51 L 146 51 M 122 61 L 149 61 M 132 51 L 130 65 L 124 90 M 130 70 L 144 70 L 142 80 L 134 90
        M 130 70 L 135 80 L 150 90 "/>

    </svg>
</div>
<!--  弹出框 -->
<div id="show1" style=" position: absolute;width: 380px;height: 278px;margin-left:180px;margin-top:40px;display: none;border:solid 2px #AC8F73;background-color:white;z-index:999">
    <div style="height: 18px;margin-top: 0px;width: 380px;"><span style="font-weight: bold;font-size:16px;float: right;margin-right: 8px;" class="close" onclick="document.getElementById('show1').style.display='none'" >x</span></div>
    <div id="show_e1" style="width: 380px;height: 280px"></div>
</div>
<div id="show2" style=" position: absolute;width: 380px;height: 278px;display: none;margin-left:176px;margin-top:390px;border:solid 2px #AC8F73;background-color:white;z-index:999">
    <div style="height: 18px;margin-top: 0px;width: 380px;"><span style="font-weight: bold;font-size:16px;float: right;margin-right: 8px;" class="close" onclick="document.getElementById('show2').style.display='none'" >x</span></div>
    <div id="show_e2" style="width: 380px;height: 280px"></div>
</div>
<div id="show3" style=" position: absolute;width: 380px;height: 278px;margin-left:1104px;margin-top: 280px; display: none;border:solid 2px #AC8F73;background-color:white;z-index:999">
    <div style="height: 18px;margin-top: 0px;width: 380px;"><span style="font-weight: bold;font-size:16px;float: right;margin-right: 8px;" class="close" onclick="document.getElementById('show3').style.display='none'" >x</span></div>
    <div id="show_e3" style="width: 380px;height: 280px"></div>
</div>
<div id="show4" style=" position: absolute;width: 380px;height: 278px;margin-left:710px;display: none;border:solid 2px #AC8F73;background-color:white;z-index:999">
    <div style="height: 18px;margin-top: 0px;width: 380px;"><span style="font-weight: bold;font-size:16px;float: right;margin-right: 8px;" class="close" onclick="document.getElementById('show4').style.display='none'" >x</span></div>
    <div id="show_e4" style="width: 380px;height: 280px"></div>
</div>
<div id="show5" style=" position: absolute;width: 380px;height: 278px;margin-left:736px;margin-top:404px;display: none;border:solid 2px #AC8F73;background-color:white;z-index:999">
    <div style="height: 18px;margin-top: 0px;width: 380px;"><span style="font-weight: bold;font-size:16px;float: right;margin-right: 8px;" class="close" onclick="document.getElementById('show5').style.display='none'" >x</span></div>
    <div id="show_e5" style="width: 380px;height: 280px"></div>
</div>
<!--左边的输入框-->
<div style="border-radius: 10px;width: 240px;border:solid #AC8F73 ;height: 140px;position: absolute;left:58px;top:145px">
    <form style="text-align: center">
        <p style="margin-top: 16px;color:#AC8F73">请输入要增加&nbsp;/&nbsp;删除的参数名</p>
        <input type="text" name="extra" class ="inputk" id="extra_cs" style="margin-top: 14px;background: #E7D9CB;background-color:transparent;padding-left: 10px" >
        <div style="width: 240px">
            <input type="button" class ="button"value="增加" style="border-radius: 3px;margin-top:12px;" onclick="add_option()">
            <input type="button"class ="button" value="删除" style="border-radius: 3px;margin-top:12px;" onclick="delete_option()">
        </div>
    </form>
</div>
<div style="border-radius: 10px;width: 240px;border:solid #AC8F73 ;height: 188px;position: absolute;left:58px;top:310px">
    <form style="text-align: center">
        <p style="margin-top: 24px;color:#AC8F73">请输入要增加/删除的数据</p>
        <!-- <label style="font-family: 'Arial', 'Tahoma', '微软雅黑', '雅黑' ;font-weight: bold;margin-left: 10px; margin-right: 10px">温度</label>-->
        <select id="attr_select" style="color:#AC8F73;background-color:transparent">
            <option id="0" value="-请选择-">-请选择-</option>
            <option id="1" value="温度">温度</option>
            <option id="2" value="湿度">湿度</option>
        </select>
        <input type="text" class ="inputk" name="shuju" id="shuju" style="margin-top: 20px;background-color:transparent;padding-left: 10px" >

        <div style="width: 240px">
            <input type="button" class ="button" value="增加" style="border-radius: 3px;margin-top:12px;" onclick="add_panduan()">
            <input type="button" class ="button" value="删除" style="border-radius: 3px;margin-top:12px;" onclick="delete_panduan()">
        </div>
    </form>
</div>

<svg style="width: 959px;height: 595px;margin-left: 350px;margin-top:60px;background-color: #888888 ;border-radius: 10px;box-shadow: 1px 1px 1px #E1C7AC;" id="svg">

    <script xlink:href="SVGPan.js"/>
    <g id="wholezoom" style="transform-origin: 0 0;position: absolute">

        <image x="-1" y="-1" width="960" height="596" xlink:href="../../../static/images/eerduosi2.jpg" id="picture" />
        <circle id="c1" cx="240" cy="200" r="16" stroke="black" stroke-width="2" fill="green" onclick='bld_echarts(this.id)' />
        <circle id="c2" cx="230" cy="390" r="16" stroke="black" stroke-width="2" fill="green" onclick='bld_echarts(this.id)'/>
        <circle id="c3" cx="780" cy="196" r="16" stroke="black" stroke-width="2" fill="green" onclick='bld_echarts(this.id)'/>
        <circle id="c4" cx="340" cy="110" r="16" stroke="black" stroke-width="2" fill="green" onclick='bld_echarts(this.id)'/>
        <circle id="c5" cx="492" cy="320" r="16" stroke="black" stroke-width="2" fill="green" onclick='bld_echarts(this.id)'/>

    </g>
</svg>
<div style="position: absolute">
    <form id="zoom_num" style="margin-top: 10px;margin-left: 510px;">
        <label style="display: inline;padding-left:25px;font-family: 'Arial', 'Tahoma', '微软雅黑', '雅黑' ;font-weight: bold;">缩放</label>
        <input id="zoom" type="range" value="1" min="0" step="0.01" max="2" style=""/>

        <label style="display: inline;padding-left:25px;font-family: 'Arial', 'Tahoma', '微软雅黑', '雅黑' ;font-weight: bold;">平移x</label>
        <input id="movex" type="range" value="1" min="-1000" step="6" max="1000" />

        <label style="display: inline;padding-left:25px;font-family: 'Arial', 'Tahoma', '微软雅黑', '雅黑' ;font-weight: bold;">平移y</label>
        <input id="movey" type="range" value="1" min="-1000" step="6"  max="1000" />
    </form>
</div>

</body>

<script type="text/javascript">
    var SVG_NS = 'http://www.w3.org/2000/svg';
    var wholepanel = document.getElementById("wholezoom");
    var zoom_num = document.getElementById("zoom_num");
    var i=3; //全局变量，id值不断增大
    //echarts初始折线图
    function bld_echarts(id) {
        var gid=id.toString();
        var sid;
        if(gid==("c1"))
        {
            var myChart = echarts.init(document.getElementById("show_e1"));
            sid=document.getElementById("show1");
        }else if(gid==("c2"))
        {
            var myChart = echarts.init(document.getElementById("show_e2"));
            sid=document.getElementById("show2");
        }else if(gid==("c3"))
        {
            var myChart = echarts.init(document.getElementById("show_e3"));
            sid=document.getElementById("show3");
        }else if(gid==("c4"))
        {
            var myChart = echarts.init(document.getElementById("show_e4"));
            sid=document.getElementById("show4");
        }else if(gid==("c5"))
        {
            var myChart = echarts.init(document.getElementById("show_e5"));
            sid=document.getElementById("show5");
        } else alert("弹出错误");

        if(sid.style.display=="none"){
            // $("#show1").css("width",wid);
            // $("#show1").css("height",hei);
            sid.style.display="block";//显示div
        }
        else if(show1.style.display=="block"){
            sid.style.display="none";//隐藏div
        }

        $.ajax({
            url: "/ech_data",
            data:{
                id:gid,
            },
            dataType: "json",//数据格式
            type: "post",//请求方式
            async: false,//是否异步请求
            success: function (data) {   //如果请求成功，返回数据。
                alert(JSON.stringify(data.data1));
                alert(JSON.stringify(data.x_data));
                myChart.setOption({
                    title: {
                        text: data.title,
                    },
                    tooltip: {
                        trigger: 'axis'
                    },
                    legend:{data: ['温度', '湿度','风力']
                        // data: ['一级保护区', '二级保护区','准保护区']
                    },
                    xAxis: {
                        type: 'category',
                        data: data.x_data,
                        boundaryGap:true,
                        show:true,
                        axisLabel:{
                            interval:0,
                            alignWithLabel:true,
                        }
                    },
                    yAxis: [
                        {
                            type: 'value',
                            boundaryGap: [0, '100%'],
                        }
                    ],
                    series: [{name: 'babble1', data: data.data1, type: 'line'}]
                    //例子 [{data: [820, 932, 901, 934, 1290, 1330, 1320], type: 'line'},{data: [120, 332, 201, 434, 190, 330, 320], type: 'line'}]
                    //  [{name: '一级保护区', data: [220, 182, 191, 234, 290, 330, 310, 250, 260, 280]}]
                    //[5, 20, 36, 10, 10, 20]

                });

            },
            error: function (e) {
                alert("Error");
                console.log(e.status);
                console.log(e.responseText);
            }
        })
    }

    zoom_num.addEventListener('input', function(e) {
        //  var ob=document.getElementById("g").getBoundingClientRect();
        if (e.target.tagName.toLowerCase() != 'input') return;
        if (!wholepanel) return;
        wholepanel.setAttribute('transform', "scale("+zoom.value+")translate("+movex.value+","+movey.value +")");

    });
//拖动对话框
    draggable1 = new PlainDraggable(document.getElementById('show1'));
    draggable2 = new PlainDraggable(document.getElementById('show2'));
    draggable3 = new PlainDraggable(document.getElementById('show3'));
    draggable4 = new PlainDraggable(document.getElementById('show4'));
    draggable5 = new PlainDraggable(document.getElementById('show5'));
   /* $(function() {
        $( "#tuoz" ).draggable();
    });     实现html元素拖拽*/


    //引入echarts的弹出框

</script>

</html>

使用draggable.min.js插件实现多个元素拖拽

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>动态添加图形和图片并可以拖拽</title>
    <meta content="width=device-width;initial-scale=1">
    <script type="text/javascript" src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
    <script src="svg.min.js"></script>
    <script src="svg.draggable.min.js"></script>

    <style>
        #drawing {
            width: 100%;
            height: 500px;
            margin: 0;
        }
    </style>
</head>

<body>
<!--向svg中添加元素-->
<svg style="width: 959px;height: 595px;margin-left: 350px;margin-top:60px;background-color: #888888 ;border-radius: 10px;box-shadow: 1px 1px 1px #E1C7AC;" id="svg">
<g id="wholezoom" style="transform-origin: 0 0;position: absolute">

</g>
</svg>
<button onclick="onLoad()">
    添加
</button>
</body>
<script>
   // <image x="-1" y="-1" width="960" height="596" xlink:href="images/eerduosi2.jpg" id="picture" />
    // 向svg中动态添加图形和图片
    //function onLoad(){
        var m,e, t, s,draw = SVG('wholezoom').attr({ 'font-size': 10 }).fill('#f57518')
        //        向svg中添加矩形rect（宽，高）center（x轴位置，y轴位置） draggable（图形可以拖动的活动区域）
        //e = draw.rect(959,595).center(150, 150).draggable({ minX: 0, minY: 50, maxX: 10000, maxY: 10000 })
        //        向svg中添加矩形image（图片地址，宽，高）center（x轴位置，y轴位置） draggable（图形可以拖动的活动区域）
        var group = draw.group();
        var i1=draw.image("eerduosi2.jpg",959,595).center(480, 297)
        var c1=draw.circle(32,32).center(250, 206).id('c1')
        var c2=draw.circle(32,32).center(234, 390).id('c2')
        var c3=draw.circle(32,32).center(780, 200).id('c3')
        var c4=draw.circle(32,32).center(338, 110).id('c4')
        var c5=draw.circle(32,32).center(494, 318).id('c5')
        group.add(i1)
        group.add(c1)
        group.add(c2)
        group.add(c3)
        group.add(c4)
        group.add(c5)
        group.draggable({ minX: -4000, minY: -4000, maxX: 4000, maxY: 4000 })
        draw.fill('green')
        draw.stroke('black')


        //        在指定位置添加一个text标签
        //draw.plain('constrained with object and ghost').center(200, 210)

    //}
</script>
</html>

使用draggable插件实现拖拽并用input range实现上下平移等

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8"/>
    <title>自动报警系统</title>
    <script src="js/echarts_demo.js" type="text/javascript"></script>
    <script src="js/echarts.js" type="text/javascript"></script>
    <script src="js/jquery.js" type="text/javascript"></script>
    <script src="js/java_index.js" type="text/javascript"></script>
    <script src="js/plain-draggable.min.js" type="text/javascript"></script>
    <script src="js/svg.min.js" type="text/javascript"></script>
    <script src="js/svg.draggable.min.js" type="text/javascript"></script>
    <link rel="stylesheet" href="css/index.css">
    <style>
        #show1{

        }
        .close:hover{
            color: darkred;
        }
        .inputk{
            text-decoration:none;
            border: solid 1px #AC8F73;
            height: 21px;
        }
        .button{
            background-color:#E7D9CB;
            color:#AC8F73;
            text-align:center;
            text-decoration:none;
            display:inline-block;
            cursor: pointer;
            border: solid 1px #AC8F73;
            font-weight: bold;
            font-family: "Arial", "Tahoma", "微软雅黑", "雅黑";

        }
    </style>
</head>
<body style="background-color:#E7D9CB ">

<!--写名字-->
<div>
    <svg xmlns="http://www.w3.org/2000/svg" version="1.1"
         xmlns:xlink="http://www.w3.org/1999/xlink";
         style="width: 200px;height: 100px;margin-top: 0px;margin-left: 0px;position: absolute">
        <path d="M 50 30 L 53 38       M 35 38 L 71 38 M 35 38 L 34 70 L 33 88 L 32 91
        M 44 49 L 65 49 L 65 63 L 44 63 M 44 56 L 70 56 M 54 45 L 54 63
        M 45 74 L 63 74 L 63 84 L 45 84 Z"/>
        <path d="M 100 32 L 99 50 L 98 60 L 97 71 L 110 90 M 94 40 L 120 40 M 112 40 L 110 56 L 109 68 L 103 90
        M 150 32 L 128 34 L 124 35 M 125 40 L 128 46 M 134 40 L 137 46 M 147 40 L 144 46
        M 125 51 L 146 51 M 122 61 L 149 61 M 132 51 L 130 65 L 124 90 M 130 70 L 144 70 L 142 80 L 134 90
        M 130 70 L 135 80 L 150 90 "/>

    </svg>
</div>
<!--  弹出框 -->
<div id="show1" style=" position: absolute;width: 380px;height: 278px;margin-left:180px;margin-top:40px;display: none;border:solid 2px #AC8F73;background-color:white;z-index:999">
    <div style="height: 18px;margin-top: 0px;width: 380px;"><span style="font-weight: bold;font-size:16px;float: right;margin-right: 8px;" class="close" onclick="document.getElementById('show1').style.display='none'" >x</span></div>
    <div id="show_e1" style="width: 380px;height: 280px"></div>
</div>
<div id="show2" style=" position: absolute;width: 380px;height: 278px;display: none;margin-left:176px;margin-top:390px;border:solid 2px #AC8F73;background-color:white;z-index:999">
    <div style="height: 18px;margin-top: 0px;width: 380px;"><span style="font-weight: bold;font-size:16px;float: right;margin-right: 8px;" class="close" onclick="document.getElementById('show2').style.display='none'" >x</span></div>
    <div id="show_e2" style="width: 380px;height: 280px"></div>
</div>
<div id="show3" style=" position: absolute;width: 380px;height: 278px;margin-left:1104px;margin-top: 280px; display: none;border:solid 2px #AC8F73;background-color:white;z-index:999">
    <div style="height: 18px;margin-top: 0px;width: 380px;"><span style="font-weight: bold;font-size:16px;float: right;margin-right: 8px;" class="close" onclick="document.getElementById('show3').style.display='none'" >x</span></div>
    <div id="show_e3" style="width: 380px;height: 280px"></div>
</div>
<div id="show4" style=" position: absolute;width: 380px;height: 278px;margin-left:710px;display: none;border:solid 2px #AC8F73;background-color:white;z-index:999">
    <div style="height: 18px;margin-top: 0px;width: 380px;"><span style="font-weight: bold;font-size:16px;float: right;margin-right: 8px;" class="close" onclick="document.getElementById('show4').style.display='none'" >x</span></div>
    <div id="show_e4" style="width: 380px;height: 280px"></div>
</div>
<div id="show5" style=" position: absolute;width: 380px;height: 278px;margin-left:736px;margin-top:404px;display: none;border:solid 2px #AC8F73;background-color:white;z-index:999">
    <div style="height: 18px;margin-top: 0px;width: 380px;"><span style="font-weight: bold;font-size:16px;float: right;margin-right: 8px;" class="close" onclick="document.getElementById('show5').style.display='none'" >x</span></div>
    <div id="show_e5" style="width: 380px;height: 280px"></div>
</div>
<!--左边的输入框-->
<div style="border-radius: 10px;width: 240px;border:solid #AC8F73 ;height: 140px;position: absolute;left:58px;top:145px">
    <form style="text-align: center">
        <p style="margin-top: 16px;color:#AC8F73">请输入要增加&nbsp;/&nbsp;删除的参数名</p>
        <input type="text" name="extra" class ="inputk" id="extra_cs" style="margin-top: 14px;background: #E7D9CB;background-color:transparent;padding-left: 10px" >
        <div style="width: 240px">
            <input type="button" class ="button"value="增加" style="border-radius: 3px;margin-top:12px;" onclick="add_option()">
            <input type="button"class ="button" value="删除" style="border-radius: 3px;margin-top:12px;" onclick="delete_option()">
        </div>
    </form>
</div>
<div style="border-radius: 10px;width: 240px;border:solid #AC8F73 ;height: 188px;position: absolute;left:58px;top:310px">
    <form style="text-align: center">
        <p style="margin-top: 24px;color:#AC8F73">请输入要增加/删除的数据</p>
        <!-- <label style="font-family: 'Arial', 'Tahoma', '微软雅黑', '雅黑' ;font-weight: bold;margin-left: 10px; margin-right: 10px">温度</label>-->
        <select id="attr_select" style="color:#AC8F73;background-color:transparent">
            <option id="0" value="-请选择-">-请选择-</option>
            <option id="1" value="温度">温度</option>
            <option id="2" value="湿度">湿度</option>
        </select>
        <input type="text" class ="inputk" name="shuju" id="shuju" style="margin-top: 20px;background-color:transparent;padding-left: 10px" >

        <div style="width: 240px">
            <input type="button" class ="button" value="增加" style="border-radius: 3px;margin-top:12px;" onclick="add_panduan()">
            <input type="button" class ="button" value="删除" style="border-radius: 3px;margin-top:12px;" onclick="delete_panduan()">
        </div>
    </form>
</div>

<svg style="width: 959px;height: 595px;margin-left: 350px;margin-top:60px;background-color: #888888 ;border-radius: 10px;box-shadow: 1px 1px 1px #E1C7AC;" id="svg">
    <script xlink:href="SVGPan.js"/>


</svg>
<div style="position: absolute">
    <form id="zoom_num" style="margin-top: 10px;margin-left: 510px;">
        <label style="display: inline;padding-left:25px;font-family: 'Arial', 'Tahoma', '微软雅黑', '雅黑' ;font-weight: bold;">缩放</label>
        <input id="zoom" type="range" value="1" min="0" step="0.01" max="2" style=""/>

        <label style="display: inline;padding-left:25px;font-family: 'Arial', 'Tahoma', '微软雅黑', '雅黑' ;font-weight: bold;">平移x</label>
        <input id="movex" type="range" value="1" min="-1000" step="6" max="1000" />

        <label style="display: inline;padding-left:25px;font-family: 'Arial', 'Tahoma', '微软雅黑', '雅黑' ;font-weight: bold;">平移y</label>
        <input id="movey" type="range" value="1" min="-1000" step="6"  max="1000" />
    </form>
</div>

</body>

<script type="text/javascript">
    var SVG_NS = 'http://www.w3.org/2000/svg';
    var wholepanel = document.getElementById("wholezoom");
    var zoom_num = document.getElementById("zoom_num");
    var i=3; //全局变量，id值不断增大
    //echarts初始折线图
    //会自动跳转到另一个新页面*/
    function bld_echarts(id) {
        var gid=id.toString();
        var sid;
        if(gid==("c1"))
        {
            var myChart = echarts.init(document.getElementById("show_e1"));
            sid=document.getElementById("show1");
        }else if(gid==("c2"))
        {
            var myChart = echarts.init(document.getElementById("show_e2"));
            sid=document.getElementById("show2");
        }else if(gid==("c3"))
        {
            var myChart = echarts.init(document.getElementById("show_e3"));
            sid=document.getElementById("show3");
        }else if(gid==("c4"))
        {
            var myChart = echarts.init(document.getElementById("show_e4"));
            sid=document.getElementById("show4");
        }else if(gid==("c5"))
        {
            var myChart = echarts.init(document.getElementById("show_e5"));
            sid=document.getElementById("show5");
        } else alert("弹出错误");
        if(sid.style.display=="none"){
            // $("#show1").css("width",wid);
            // $("#show1").css("height",hei);
            sid.style.display="block";//显示div
        }
        else if(show1.style.display=="block"){
            sid.style.display="none";//隐藏div
        }

        $.ajax({
            url: "/ech_data",
            data:{
                id:gid,
            },
            dataType: "json",//数据格式
            type: "post",//请求方式
            async: false,//是否异步请求
            success: function (data) {   //如果请求成功，返回数据。
                alert(JSON.stringify(data.data1));
                alert(JSON.stringify(data.x_data));
                myChart.setOption({
                    title: {
                        text: data.title,
                    },
                    tooltip: {
                        trigger: 'axis'
                    },
                    legend:{data: ['温度', '湿度','风力']
                        // data: ['一级保护区', '二级保护区','准保护区']
                    },
                    xAxis: {
                        type: 'category',
                        data: data.x_data,
                        boundaryGap:true,
                        show:true,
                        axisLabel:{
                            interval:0,
                            alignWithLabel:true,
                        }
                    },
                    yAxis: [
                        {
                            type: 'value',
                            boundaryGap: [0, '100%'],
                        }
                    ],
                    series: [{name: 'babble1', data: data.data1, type: 'line'}]
                    //例子 [{data: [820, 932, 901, 934, 1290, 1330, 1320], type: 'line'},{data: [120, 332, 201, 434, 190, 330, 320], type: 'line'}]
                    //  [{name: '一级保护区', data: [220, 182, 191, 234, 290, 330, 310, 250, 260, 280]}]
                    //[5, 20, 36, 10, 10, 20]

                });

            },
            error: function (e) {
                alert("Error");
                console.log(e.status);
                console.log(e.responseText);
            }
        })
    }


//拖动对话框
    draggable1 = new PlainDraggable(document.getElementById('show1'));
    draggable2 = new PlainDraggable(document.getElementById('show2'));
    draggable3 = new PlainDraggable(document.getElementById('show3'));
    draggable4 = new PlainDraggable(document.getElementById('show4'));
    draggable5 = new PlainDraggable(document.getElementById('show5'));
   /* $(function() {
        $( "#tuoz" ).draggable();
    });     实现html元素拖拽*/


    //引入echarts的弹出框
    var m,e, t, s,draw = SVG('svg').attr({ 'font-size': 10 }).fill('#f57518')
    //        向svg中添加矩形rect（宽，高）center（x轴位置，y轴位置） draggable（图形可以拖动的活动区域）
    //e = draw.rect(959,595).center(150, 150).draggable({ minX: 0, minY: 50, maxX: 10000, maxY: 10000 })
    //        向svg中添加矩形image（图片地址，宽，高）center（x轴位置，y轴位置） draggable（图形可以拖动的活动区域）
    var group = draw.group().id('wholezoom')
    var i1=draw.image("images/eerduosi2.jpg",959,595).center(480, 297).id('picture')
    var c1=draw.circle(32,32).center(250, 206).id('c1')
    var c2=draw.circle(32,32).center(234, 390).id('c2')
    var c3=draw.circle(32,32).center(780, 200).id('c3')
    var c4=draw.circle(32,32).center(338, 110).id('c4')
    var c5=draw.circle(32,32).center(494, 318).id('c5')
    group.add(i1)
    group.add(c1)
    group.add(c2)
    group.add(c3)
    group.add(c4)
    group.add(c5)
    document.getElementById("wholezoom").style.position='absolute';
    group.attr('transform-origin','50% 50%' );
    group.draggable({ minX: -4000, minY: -4000,maxX: 4000, maxY: 4000 })
    draw.fill('green')
    draw.stroke('black')

    //实现左右平移等
    zoom_num.addEventListener('input', function(e) {
        //  var ob=document.getElementById("g").getBoundingClientRect();
        if (e.target.tagName.toLowerCase() != 'input') return;
        /*if (!wholepanel) {
            alert("!!!");
            return}; */
        //wholepanel.setAttribute('transform', "scale("+zoom.value+")translate("+movex.value+","+movey.value +")");  得不到
        if (!group) {
            return};
        group.attr('transform',"scale("+zoom.value+")translate("+movex.value+","+movey.value +")" );
    });
</script>

</html>

使用d3.v4.js使用移动缩放拖拽

<!DOCTYPE html>
<html>
<head>
    <title>Demo</title>
    <script src="https://d3js.org/d3.v4.min.js"></script>
    <script src="svg.min.js"></script>
    <script src="svg.draggable.min.js"></script>
</head>

<body>
<div style="top:5px"><button id="reset">reset</button>
    <button id="zoomIn">-</button>
    <button id="zoomOut">+</button>
    <button id="translateX">-></button>
    <button id="translateY">xia</button>
</div>

<svg style="width: 959px;height: 595px;margin-left: 350px;margin-top:60px;background-color: #888888 ;border-radius: 10px;box-shadow: 1px 1px 1px #E1C7AC;" id="svg"></svg>


<script>


    let svg = d3.select("svg"),
        width = +svg.attr("width"),
        height = +svg.attr("height");

    let g = svg.append("g");

    g.append("text")
        .attr("x", width/2)
        .attr("y", height/2)
        .text("测试按钮放大、缩小Demo");

    let zoom = d3.zoom()
        .on("zoom", function(){ // zoom事件
            console.log(`Zoom: ${d3.zoomTransform(svg.node())}`);
            console.log(`D3: : ${d3.event.transform}`);
            g.attr("transform", d3.zoomTransform(svg.node()));
        });

    svg.call(zoom);

    d3.select("#reset")
        .on("click", function(d){
            svg.call(zoom.transform, d3.zoomIdentity);
        });
    d3.select("#zoomIn")
        .on("click", function(d) {
            zoom.scaleBy(svg, 0.9); // 执行该方法后 会触发zoom事件
            let tran = d3.zoomTransform(svg.node());
            // svg.attr("transform", `translate(${tran.x},${tran.y}),scale(${tran.k})`); // 您可以手动地更新
            console.log(tran);
        });

    d3.select("#zoomOut")
        .on("click", function(d) {
            zoom.scaleBy(svg, 1.1); // 执行该方法后 会触发zoom事件
            let tran = d3.zoomTransform(svg.node());
            // svg.attr("transform", `translate(${tran.x},${tran.y}),scale(${tran.k})`); // 您可以手动地更新
            console.log(tran);
        });

    d3.select("#translateX")
        .on("click", function(d) {
            zoom.translateBy(svg, 10, 0);
            let tran = d3.zoomTransform(svg.node());
            // svg.attr("transform", `translate(${tran.x},${tran.y}),scale(${tran.k})`);
            console.log(tran);
        });


    d3.select("#translateY")
        .on("click", function(d) {
            zoom.translateBy(svg, 0, 10);
            let tran = d3.zoomTransform(svg.node());
            // svg.attr("transform", `translate(${tran.x},${tran.y}),scale(${tran.k})`);
            console.log(tran);
        });
</script>
</body>

</html>

上面一版多个元素改良版

<!DOCTYPE html>
<html>
<head>
    <title>Demo</title>
    <script src="https://d3js.org/d3.v4.min.js"></script>
    <script src="svg.min.js"></script>
    <script src="svg.draggable.min.js"></script>
</head>

<body>
<div style="top:5px"><button id="reset">reset</button>
    <button id="zoomIn">-</button>
    <button id="zoomOut">+</button>
    <button id="translateX">-></button>
    <button id="translateY">xia</button>
</div>

<svg style="width: 959px;height: 595px;margin-left: 350px;margin-top:60px;background-color: #888888 ;border-radius: 10px;box-shadow: 1px 1px 1px #E1C7AC;" id="svg"></svg>


<script>
    var m,e, t, s,draw = SVG('svg').attr({ 'font-size': 10 }).fill('#f57518')
    //        向svg中添加矩形rect（宽，高）center（x轴位置，y轴位置） draggable（图形可以拖动的活动区域）
    //e = draw.rect(959,595).center(150, 150).draggable({ minX: 0, minY: 50, maxX: 10000, maxY: 10000 })
    //        向svg中添加矩形image（图片地址，宽，高）center（x轴位置，y轴位置） draggable（图形可以拖动的活动区域）
    var group = draw.group().id('wholezoom')
    var i1=draw.image("eerduosi2.jpg",959,595).center(480, 297).id('picture')
    var c1=draw.circle(32,32).center(250, 206).id('c1')
    var c2=draw.circle(32,32).center(234, 390).id('c2')
    var c3=draw.circle(32,32).center(780, 200).id('c3')
    var c4=draw.circle(32,32).center(338, 110).id('c4')
    var c5=draw.circle(32,32).center(494, 318).id('c5')
    group.add(i1)
    group.add(c1)
    group.add(c2)
    group.add(c3)
    group.add(c4)
    group.add(c5)
    let svg = d3.select("svg"),
        width = +svg.attr("width"),
        height = +svg.attr("height");


    let zoom = d3.zoom()
        .on("zoom", function(){ // zoom事件
            console.log(`Zoom: ${d3.zoomTransform(svg.node())}`);
            console.log(`D3: : ${d3.event.transform}`);
            group.attr("transform", d3.zoomTransform(svg.node()));
        });

    svg.call(zoom);

    d3.select("#reset")
        .on("click", function(d){
            svg.call(zoom.transform, d3.zoomIdentity);
        });
    d3.select("#zoomIn")
        .on("click", function(d) {
            zoom.scaleBy(svg, 0.9); // 执行该方法后 会触发zoom事件
            let tran = d3.zoomTransform(svg.node());
            // svg.attr("transform", `translate(${tran.x},${tran.y}),scale(${tran.k})`); // 您可以手动地更新
            console.log(tran);
        });

    d3.select("#zoomOut")
        .on("click", function(d) {
            zoom.scaleBy(svg, 1.1); // 执行该方法后 会触发zoom事件
            let tran = d3.zoomTransform(svg.node());
            // svg.attr("transform", `translate(${tran.x},${tran.y}),scale(${tran.k})`); // 您可以手动地更新
            console.log(tran);
        });

    d3.select("#translateX")
        .on("click", function(d) {
            zoom.translateBy(svg, 10, 0);
            let tran = d3.zoomTransform(svg.node());
            // svg.attr("transform", `translate(${tran.x},${tran.y}),scale(${tran.k})`);
            console.log(tran);
        });


    d3.select("#translateY")
        .on("click", function(d) {
            zoom.translateBy(svg, 0, 10);
            let tran = d3.zoomTransform(svg.node());
            // svg.attr("transform", `translate(${tran.x},${tran.y}),scale(${tran.k})`);
            console.log(tran);
        });
</script>
</body>

</html>

完成版！改良得很好了。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8"/>
    <title>自动报警系统</title>
    <script src="js/echarts_demo.js" type="text/javascript"></script>
    <script src="js/echarts.js" type="text/javascript"></script>
    <script src="js/jquery.js" type="text/javascript"></script>
    <script src="js/java_index.js" type="text/javascript"></script>
    <script src="js/plain-draggable.min.js" type="text/javascript"></script>
    <link rel="stylesheet" href="css/index.css">
    <script src="https://d3js.org/d3.v4.min.js"></script>
    <script src="js/svg.min.js" type="text/javascript"></script>
    <script src="js/svg.draggable.min.js" type="text/javascript"></script>
    <style>
        #show1{

        }
        .close:hover{
            color: darkred;
        }
        .inputk{
            text-decoration:none;
            border: solid 1px #AC8F73;
            height: 21px;
        }
        .button{
            background-color:#E7D9CB;
            color:#AC8F73;
            text-align:center;
            text-decoration:none;
            display:inline-block;
            cursor: pointer;
            border: solid 1px #AC8F73;
            font-weight: bold;
            font-family: "Arial", "Tahoma", "微软雅黑", "雅黑";

        }
        .buttond{
            background-color:#E7D9CB;
            color:#AC8F73;
            text-align:center;
            text-decoration:none;
            display:inline-block;
            cursor: pointer;
            border: solid 1px #AC8F73;
            font-weight: bold;
            font-family: "Arial", "Tahoma", "微软雅黑", "雅黑";

        }
    </style>
</head>
<body style="background-color:#E7D9CB ">

<!--写名字-->
<div>
    <svg xmlns="http://www.w3.org/2000/svg" version="1.1"
         xmlns:xlink="http://www.w3.org/1999/xlink";
         style="width: 200px;height: 100px;margin-top: 0px;margin-left: 0px;position: absolute">
        <path d="M 50 30 L 53 38       M 35 38 L 71 38 M 35 38 L 34 70 L 33 88 L 32 91
        M 44 49 L 65 49 L 65 63 L 44 63 M 44 56 L 70 56 M 54 45 L 54 63
        M 45 74 L 63 74 L 63 84 L 45 84 Z"/>
        <path d="M 100 32 L 99 50 L 98 60 L 97 71 L 110 90 M 94 40 L 120 40 M 112 40 L 110 56 L 109 68 L 103 90
        M 150 32 L 128 34 L 124 35 M 125 40 L 128 46 M 134 40 L 137 46 M 147 40 L 144 46
        M 125 51 L 146 51 M 122 61 L 149 61 M 132 51 L 130 65 L 124 90 M 130 70 L 144 70 L 142 80 L 134 90
        M 130 70 L 135 80 L 150 90 "/>

    </svg>
</div>
<!--  弹出框 -->
<div id="show1" style=" position: absolute;width: 380px;height: 278px;margin-left:180px;margin-top:40px;display: none;border:solid 2px #AC8F73;background-color:white;z-index:999">
    <div style="height: 18px;margin-top: 0px;width: 380px;"><span style="font-weight: bold;font-size:16px;float: right;margin-right: 8px;" class="close" onclick="document.getElementById('show1').style.display='none'" >x</span></div>
    <div id="show_e1" style="width: 380px;height: 280px"></div>
</div>
<div id="show2" style=" position: absolute;width: 380px;height: 278px;display: none;margin-left:176px;margin-top:390px;border:solid 2px #AC8F73;background-color:white;z-index:999">
    <div style="height: 18px;margin-top: 0px;width: 380px;"><span style="font-weight: bold;font-size:16px;float: right;margin-right: 8px;" class="close" onclick="document.getElementById('show2').style.display='none'" >x</span></div>
    <div id="show_e2" style="width: 380px;height: 280px"></div>
</div>
<div id="show3" style=" position: absolute;width: 380px;height: 278px;margin-left:1104px;margin-top: 280px; display: none;border:solid 2px #AC8F73;background-color:white;z-index:999">
    <div style="height: 18px;margin-top: 0px;width: 380px;"><span style="font-weight: bold;font-size:16px;float: right;margin-right: 8px;" class="close" onclick="document.getElementById('show3').style.display='none'" >x</span></div>
    <div id="show_e3" style="width: 380px;height: 280px"></div>
</div>
<div id="show4" style=" position: absolute;width: 380px;height: 278px;margin-left:710px;display: none;border:solid 2px #AC8F73;background-color:white;z-index:999">
    <div style="height: 18px;margin-top: 0px;width: 380px;"><span style="font-weight: bold;font-size:16px;float: right;margin-right: 8px;" class="close" onclick="document.getElementById('show4').style.display='none'" >x</span></div>
    <div id="show_e4" style="width: 380px;height: 280px"></div>
</div>
<div id="show5" style=" position: absolute;width: 380px;height: 278px;margin-left:736px;margin-top:404px;display: none;border:solid 2px #AC8F73;background-color:white;z-index:999">
    <div style="height: 18px;margin-top: 0px;width: 380px;"><span style="font-weight: bold;font-size:16px;float: right;margin-right: 8px;" class="close" onclick="document.getElementById('show5').style.display='none'" >x</span></div>
    <div id="show_e5" style="width: 380px;height: 280px"></div>
</div>
<!--左边的输入框-->
<div style="border-radius: 10px;width: 240px;border:solid #AC8F73 ;height: 140px;position: absolute;left:58px;top:145px">
    <form style="text-align: center">
        <p style="margin-top: 16px;color:#AC8F73">请输入要增加&nbsp;/&nbsp;删除的参数名</p>
        <input type="text" name="extra" class ="inputk" id="extra_cs" style="margin-top: 14px;background: #E7D9CB;background-color:transparent;padding-left: 10px" >
        <div style="width: 240px">
            <input type="button" class ="button"value="增加" style="border-radius: 3px;margin-top:12px;" onclick="add_option()">
            <input type="button"class ="button" value="删除" style="border-radius: 3px;margin-top:12px;" onclick="delete_option()">
        </div>
    </form>
</div>
<div style="border-radius: 10px;width: 240px;border:solid #AC8F73 ;height: 188px;position: absolute;left:58px;top:310px">
    <form style="text-align: center">
        <p style="margin-top: 24px;color:#AC8F73">请输入要增加/删除的数据</p>
        <!-- <label style="font-family: 'Arial', 'Tahoma', '微软雅黑', '雅黑' ;font-weight: bold;margin-left: 10px; margin-right: 10px">温度</label>-->
        <select id="attr_select" style="color:#AC8F73;background-color:transparent">
            <option id="0" value="-请选择-">-请选择-</option>
            <option id="1" value="温度">温度</option>
            <option id="2" value="湿度">湿度</option>
        </select>
        <input type="text" class ="inputk" name="shuju" id="shuju" style="margin-top: 20px;background-color:transparent;padding-left: 10px" >

        <div style="width: 240px">
            <input type="button" class ="button" value="增加" style="border-radius: 3px;margin-top:12px;" onclick="add_panduan()">
            <input type="button" class ="button" value="删除" style="border-radius: 3px;margin-top:12px;" onclick="delete_panduan()">
        </div>
    </form>
</div>

<svg style="width: 959px;height: 595px;margin-left: 350px;margin-top:60px;background-color: #888888 ;border-radius: 10px;box-shadow: 1px 1px 1px #E1C7AC;" id="svg">
    <script xlink:href="SVGPan.js"/>

</svg>
<div style="position: absolute;width: 100%">
    <div style="margin-top:10px;margin-left: 40%">
        <label class="buttond" style="border: none">整体:</label>
        <button id="reset" class="buttond">重置</button>
        <button id="zoomIn" class="buttond" >缩小</button>
        <button id="zoomOut" class="buttond" >放大</button>
        <button id="translateXL" class="buttond">左移</button>
        <button id="translateXR" class="buttond">右移</button>
        <button id="translateYU" class="buttond">上移</button>
        <button id="translateYD" class="buttond">下移</button>
    </div>
</div>

</body>

<script type="text/javascript">
    var SVG_NS = 'http://www.w3.org/2000/svg';
    var wholepanel = document.getElementById("wholezoom");
    var zoom_num = document.getElementById("zoom_num");
    var i=3; //全局变量，id值不断增大
    //echarts初始折线图
    //会自动跳转到另一个新页面*/
    function bld_echarts(id) {
        alert(id);
        var gid=id;
        var sid;
        if(gid==("c1"))
        {
            var myChart = echarts.init(document.getElementById("show_e1"));
            sid=document.getElementById("show1");
        }else if(gid==("c2"))
        {
            var myChart = echarts.init(document.getElementById("show_e2"));
            sid=document.getElementById("show2");
        }else if(gid==("c3"))
        {
            var myChart = echarts.init(document.getElementById("show_e3"));
            sid=document.getElementById("show3");
        }else if(gid==("c4"))
        {
            var myChart = echarts.init(document.getElementById("show_e4"));
            sid=document.getElementById("show4");
        }else if(gid==("c5"))
        {
            var myChart = echarts.init(document.getElementById("show_e5"));
            sid=document.getElementById("show5");
        } else alert("弹出错误");
        if(sid.style.display=="none"){
            // $("#show1").css("width",wid);
            // $("#show1").css("height",hei);
            sid.style.display="block";//显示div
        }
        else if(show1.style.display=="block"){
            sid.style.display="none";//隐藏div
        }

        $.ajax({
            url: "/ech_data",
            data:{
                id:gid,
            },
            dataType: "json",//数据格式
            type: "post",//请求方式
            async: false,//是否异步请求
            success: function (data) {   //如果请求成功，返回数据。
                alert(JSON.stringify(data.data1));
                alert(JSON.stringify(data.x_data));
                myChart.setOption({
                    title: {
                        text: data.title,
                    },
                    tooltip: {
                        trigger: 'axis'
                    },
                    legend:{data: ['温度', '湿度','风力']
                        // data: ['一级保护区', '二级保护区','准保护区']
                    },
                    xAxis: {
                        type: 'category',
                        data: data.x_data,
                        boundaryGap:true,
                        show:true,
                        axisLabel:{
                            interval:0,
                            alignWithLabel:true,
                        }
                    },
                    yAxis: [
                        {
                            type: 'value',
                            boundaryGap: [0, '100%'],
                        }
                    ],
                    series: [{name: 'babble1', data: data.data1, type: 'line'}]
                    //例子 [{data: [820, 932, 901, 934, 1290, 1330, 1320], type: 'line'},{data: [120, 332, 201, 434, 190, 330, 320], type: 'line'}]
                    //  [{name: '一级保护区', data: [220, 182, 191, 234, 290, 330, 310, 250, 260, 280]}]
                    //[5, 20, 36, 10, 10, 20]

                });

            },
            error: function (e) {
                alert("Error");
                console.log(e.status);
                console.log(e.responseText);
            }
        })
    }


//拖动对话框
    draggable1 = new PlainDraggable(document.getElementById('show1'));
    draggable2 = new PlainDraggable(document.getElementById('show2'));
    draggable3 = new PlainDraggable(document.getElementById('show3'));
    draggable4 = new PlainDraggable(document.getElementById('show4'));
    draggable5 = new PlainDraggable(document.getElementById('show5'));


    //引入echarts的弹出框
    var m,e, t, s,draw = SVG('svg').attr({ 'font-size': 10 }).fill('#f57518')
    //        向svg中添加矩形rect（宽，高）center（x轴位置，y轴位置） draggable（图形可以拖动的活动区域）
    //e = draw.rect(959,595).center(150, 150).draggable({ minX: 0, minY: 50, maxX: 10000, maxY: 10000 })
    //        向svg中添加矩形image（图片地址，宽，高）center（x轴位置，y轴位置） draggable（图形可以拖动的活动区域）
    var group = draw.group().id('wholezoom')
    var i1=draw.image("images/eerduosi2.jpg",959,595).center(480, 297).id('picture')
    var c1=draw.circle(32,32).center(250, 206).id('c1')
    var c2=draw.circle(32,32).center(234, 390).id('c2')
    var c3=draw.circle(32,32).center(780, 200).id('c3')
    var c4=draw.circle(32,32).center(338, 110).id('c4')
    var c5=draw.circle(32,32).center(494, 318).id('c5')
    var text1=draw.text("1").center(250,206).id('text1')
    var text2=draw.text("2").center(234,390).id('text2')
    var text3=draw.text("3").center(780, 200).id('text3')
    var text4=draw.text("4").center(338, 110).id('text4')
    var text5=draw.text("5").center(494, 318).id('text5')

    group.add(i1)
    group.add(c1)
    group.add(c2)
    group.add(c3)
    group.add(c4)
    group.add(c5)
    group.add(text1); group.add(text2); group.add(text3); group.add(text4); group.add(text5);
    draw.fill('green')
    draw.stroke('black')
    let svg = d3.select("#svg"),
        width = +svg.attr("width"),
        height = +svg.attr("height");


    let zoom = d3.zoom()
        .on("zoom", function(){ // zoom事件
            console.log(`Zoom: ${d3.zoomTransform(svg.node())}`);
            console.log(`D3: : ${d3.event.transform}`);
            group.attr("transform", d3.zoomTransform(svg.node()));
        });

    svg.call(zoom);

    d3.select("#c1")
        .on("click",function (){
            bld_echarts("c1");
        });d3.select("#text1")
        .on("click",function (){
            bld_echarts("c1");
        });
    d3.select("#c2")
        .on("click",function (){
            bld_echarts("c2");
        });d3.select("#text2")
        .on("click",function (){
            bld_echarts("c2");
        });
    d3.select("#c3")
        .on("click",function (){
            bld_echarts("c3");
        });d3.select("#text3")
        .on("click",function (){
            bld_echarts("c3");
        });
    d3.select("#c4")
        .on("click",function (){
            bld_echarts("c4");
        });d3.select("#text4")
        .on("click",function (){
            bld_echarts("c4");
        });
    d3.select("#c5")
        .on("click",function (){
            bld_echarts("c5");
        });d3.select("#text5")
        .on("click",function (){
            bld_echarts("c5");
        });


    d3.select("#reset")
        .on("click", function(d){
            svg.call(zoom.transform, d3.zoomIdentity);
        });
    d3.select("#zoomIn")
        .on("click", function(d) {
            zoom.scaleBy(svg, 0.9); // 执行该方法后 会触发zoom事件
            let tran = d3.zoomTransform(svg.node());
            // svg.attr("transform", `translate(${tran.x},${tran.y}),scale(${tran.k})`); // 您可以手动地更新
            console.log(tran);
        });

    d3.select("#zoomOut")
        .on("click", function(d) {
            zoom.scaleBy(svg, 1.1); // 执行该方法后 会触发zoom事件
            let tran = d3.zoomTransform(svg.node());
            // svg.attr("transform", `translate(${tran.x},${tran.y}),scale(${tran.k})`); // 您可以手动地更新
            console.log(tran);
        });

    d3.select("#translateXL")
        .on("click", function(d) {
            zoom.translateBy(svg, -10, 0);
            let tran = d3.zoomTransform(svg.node());
            // svg.attr("transform", `translate(${tran.x},${tran.y}),scale(${tran.k})`);
            console.log(tran);
        });

    d3.select("#translateXR")
        .on("click", function(d) {
            zoom.translateBy(svg, 10, 0);
            let tran = d3.zoomTransform(svg.node());
            // svg.attr("transform", `translate(${tran.x},${tran.y}),scale(${tran.k})`);
            console.log(tran);
        });

    d3.select("#translateYU")
        .on("click", function(d) {
            zoom.translateBy(svg, 0, -10);
            let tran = d3.zoomTransform(svg.node());
            // svg.attr("transform", `translate(${tran.x},${tran.y}),scale(${tran.k})`);
            console.log(tran);
        });

    d3.select("#translateYD")
        .on("click", function(d) {
            zoom.translateBy(svg, 0, 10);
            let tran = d3.zoomTransform(svg.node());
            // svg.attr("transform", `translate(${tran.x},${tran.y}),scale(${tran.k})`);
            console.log(tran);
        });
</script>

</html>

乱搭巴士

关注

0
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
svg实现多个元素拖拽

<!doctype html><html><head> <meta charset="utf-8"> <title>动态添加图形和图片并可以拖拽</title> <meta content="width=device-width;initial-scale=1"> <scr...
复制链接

扫一扫