用d3.js动态绘制的拖放元素

问题描述 投票：0回答：1

我正在尝试用d3绘制familiogram，这是我第一次使用此库，但是我无法拖放svg上绘制的元素，尽管我已经寻找了示例，但此任务很困难对我来说。

直到现在为止绘制圆形和矩形来代表父亲和母亲，问题是我无法移动元素来固定元素的位置。

提前感谢您的帮助。

这是我的代码：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta charset="UTF-8">
            <title>FAM</title>
            <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.3/jquery.min.js"></script>
            <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.14.2/d3.js"></script>
            <script type="text/javascript">
                $(function () {
                    var svg = d3.select('#svf');//.on("mousedown", mousedown).on("mouseup", mouseup);
                    var container = svg.append("g");
                    var pxy = new Array();
                    svg.on('click', function () {
                        var coords = d3.mouse(this), x = coords[0], y = coords[1];
                        var lnk = $('#dv_conv').find('a[data-pressed="1"]');
                        var conv = lnk.attr('data-conv');

                        if (conv == 1) {
                            pxy = new Array();
                            container.append('circle').attr('cx', x).attr('cy', y).attr('r', 30).attr('stroke-width', 1).attr('stroke', '#000').attr('fill', 'transparent').on("dblclick", clicked);

                        }

                        if (conv == 2) {
                            pxy = new Array();
                            container.append('rect').attr('x', x).attr('y', y).attr('width', 60).attr('height', 60).attr('stroke-width', 1).attr('stroke', '#000').attr('fill', 'transparent').on("dblclick", clicked);
                        }

                        if (conv == 3) {
                            pxy[pxy.length] = x;
                            pxy[pxy.length] = y;

                            pxy[pxy.length] = x;
                            pxy[pxy.length] = y + 30;

                            pxy[pxy.length] = x + 160;
                            pxy[pxy.length] = y + 30;

                            pxy[pxy.length] = x + 160;
                            pxy[pxy.length] = y;

                            container.append('polyline').attr("stroke", '#000').attr('fill', 'none').attr('points', pxy);
                        }
                    });

                    d3.select('body').on('keydown', function () {
                        if (d3.event.keyCode === 27) {
                            $('#lnk_circle').attr('data-pressed', 0);
                            $('#lnk_rectangle').attr('data-pressed', 0);
                            $('#lnk_line').attr('data-pressed', 0);
                        }
                    });

                    var drag = d3.drag();
                    d3.selectAll("circle").call(d3.drag().on("start", started));

                    function started() {
                        var circle = d3.select(this).classed("dragging", true);

                        d3.event.on("drag", dragged).on("end", ended);

                        function dragged(d) {
                            circle.raise().attr("cx", d.x = d3.event.x).attr("cy", d.y = d3.event.y);
                        }

                        function ended() {
                            circle.classed("dragging", false);
                        }
                    }

                    function clicked(d, i) {
                        //alert('');
                    }
                    /*$('#svg').on('dblclick','circle',function(){
                     alert('');
                     });*/

                    $('#lnk_circle').click(function () {
                        $('#lnk_rectangle').attr('data-pressed', 0);
                        $('#lnk_line').attr('data-pressed', 0);
                        $(this).attr('data-pressed', 1);
                        return false;
                    });

                    $('#lnk_rectangle').click(function () {
                        $('#lnk_circle').attr('data-pressed', 0);
                        $('#lnk_line').attr('data-pressed', 0);
                        $(this).attr('data-pressed', 1);
                        return false;
                    });

                    $('#lnk_line').click(function () {
                        $('#lnk_circle').attr('data-pressed', 0);
                        $('#lnk_rectangle').attr('data-pressed', 0);
                        $(this).attr('data-pressed', 1);
                        return false;
                    });
                });
            </script>
    </head>
    <body>
        <div id="dv_conv" style="float: left;width:200px;border:1px solid #000;margin-right: 1px">
            <a href="#" id="lnk_circle" data-pressed="0" data-conv="1">Circle</a><br/>
            <a href="#" id="lnk_rectangle" data-pressed="0" data-conv="2">Rectangle</a><br/>
            <a href="#" id="lnk_line" data-pressed="0" data-conv="3">Line</a><br/>
        </div>

        <div id="dv_familiogram" style="float: left;width:500px;height: 500px;border:1px solid #000;overflow: scroll">

            <svg id="svf"  style="width:500px;height:100%;background-color:#cce7d4"></svg>

        </div>
    </body>
</html>


$(function () {
                var svg = d3.select('#svf');//.on("mousedown", mousedown).on("mouseup", mouseup);
                var container = svg.append('g');
                var pxy = new Array(), line,i=0,j=0;
                
                for(i=0;i<500;i=i+10){
                    container.append('line').attr('x1', i).attr('y1', 0).attr('x2', i).attr('y2', 500).attr('stroke', '#CFCECE').attr('stroke-width', 1).attr('fill', 'none');
                }
                
                for(j=0;j<500;j=j+10){
                    container.append('line').attr('x1',1).attr('y1', j).attr('x2', 500).attr('y2', j).attr('stroke', '#CFCECE').attr('stroke-width', 1).attr('fill', 'none');
                }
                
                function main() {
                    pxy = new Array();
                    var coords = d3.mouse(this), x = coords[0], y = coords[1];
                    var lnk = $('#dv_conv').find('a[data-pressed="1"]');
                    var conv = lnk.attr('data-conv');

                    if (conv == 1) {
                        pxy = new Array();
                        container.append('circle').attr('cx', x).attr('cy', y).attr('r', 30).attr('stroke-width', 2).attr('stroke', '#000').attr('fill', 'transparent').on("dblclick", clicked).call(d3.drag().on("start", dragstarted).on("drag", dragged).on("end", dragended));
                    }

                    if (conv == 2) {
                        pxy = new Array();
                        container.append('rect').attr('x', x).attr('y', y).attr('width', 60).attr('height', 60).attr('stroke-width', 2).attr('stroke', '#000').attr('fill', 'transparent').on("dblclick", clicked).call(d3.drag().on("start", dragstarted).on("drag", dragged).on("end", dragended));
                    }

                    if (conv == 3) {
                        //svg.on("click", mousedown).on("dblclick", mouseup);
                    }

                    if (conv == 4) {
                        pxy[pxy.length] = x;
                        pxy[pxy.length] = y;

                        pxy[pxy.length] = x;
                        pxy[pxy.length] = y + 30;

                        pxy[pxy.length] = x + 160;
                        pxy[pxy.length] = y + 30;

                        pxy[pxy.length] = x + 160;
                        pxy[pxy.length] = y;

                        container.append('polyline').attr("stroke", '#000').attr('stroke-width', 1).attr('fill', 'transparent').attr('points', pxy).call(d3.drag().on("start", dragstarted).on("drag", dragged).on("end", dragended));
                        pxy = new Array();
                    }
                }

                svg.on('click', main);

                function mousedown() {
                    var m = d3.mouse(this);
                    line = container.append("line")
                            .attr("x1", m[0])
                            .attr("y1", m[1])
                            .attr("x2", m[0])
                            .attr("y2", m[1]).attr('stroke', '#000').attr('stroke-width', 2).attr('fill', 'transparent').call(d3.drag().on("start", dragstarted).on("drag", dragged).on("end", dragended));
                    svg.on('mousemove', mousemove);
                }

                function mousemove() {
                    var m = d3.mouse(this);
                    line.attr('x2', m[0]).attr('y2', m[1]);
                }

                function mouseup() {
                    svg.on('mousemove', null);
                    svg.on('click', null);
                }

                function dragstarted(d) {
                    d3.select(this).raise().classed('active', true);
                }

                function dragged(d) {
                    var lnk = $('#dv_conv').find('a[data-pressed="1"]');
                    var conv = lnk.attr('data-conv');

                    if (conv == 1) {
                        d3.select(this).attr('cx', +d3.select(this).attr('cx') + d3.event.dx);
                        d3.select(this).attr('cy', +d3.select(this).attr('cy') + d3.event.dy);
                    }

                    if (conv == 2) {
                        d3.select(this).attr('x', +d3.select(this).attr('x') + d3.event.dx);
                        d3.select(this).attr('y', +d3.select(this).attr('y') + d3.event.dy);
                    }

                    if (conv == 3 || conv == 4) {
                        this.x = this.x || 0;
                        this.y = this.y || 0;
                        this.x += d3.event.dx;
                        this.y += d3.event.dy;
                        d3.select(this).attr('transform', 'translate(' + this.x + ',' + this.y + ')');
                    }
                }


                function dragended(d) {
                    d3.select(this).classed('active', false);
                }

                d3.select('body').on('keydown', function () {
                    if (d3.event.keyCode === 27) {
                        pxy = new Array();
                        $('#lnk_circle').attr('data-pressed', 0);
                        $('#lnk_rectangle').attr('data-pressed', 0);
                        $('#lnk_polyline').attr('data-pressed', 0);
                        svg.on('mousemove', null);
                        svg.on('click', null);
                    }
                });

                function clicked(d, i) {
                    //alert('');
                }

                $('#lnk_circle').click(function () {
                    svg.on('click', main);
                    $('#lnk_rectangle').attr('data-pressed', 0);
                    $('#lnk_line').attr('data-pressed', 0);
                    $('#lnk_polyline').attr('data-pressed', 0);
                    $(this).attr('data-pressed', 1);
                    return false;
                });

                $('#lnk_rectangle').click(function () {
                    svg.on('click', main);
                    $('#lnk_circle').attr('data-pressed', 0);
                    $('#lnk_polyline').attr('data-pressed', 0);
                    $('#lnk_line').attr('data-pressed', 0);
                    $(this).attr('data-pressed', 1);
                    return false;
                });

                $('#lnk_polyline').click(function () {
                    svg.on('click', main);
                    $('#lnk_circle').attr('data-pressed', 0);
                    $('#lnk_rectangle').attr('data-pressed', 0);
                    $('#lnk_line').attr('data-pressed', 0);
                    $(this).attr('data-pressed', 1);
                    return false;
                });

                $('#lnk_line').click(function () {
                    svg.on("click", mousedown).on("dblclick", mouseup);
                    $('#lnk_circle').attr('data-pressed', 0);
                    $('#lnk_rectangle').attr('data-pressed', 0);
                    $('#lnk_polyline').attr('data-pressed', 0);
                    $(this).attr('data-pressed', 1);
                    return false;
                });
                
                
            });
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.3/jquery.min.js"></script>

<div id="dv_conv" style="float: left;width:200px;border:1px solid #000;margin-right: 1px">
        <a href="#" id="lnk_circle" data-pressed="0" data-conv="1">Circle</a><br/>
        <a href="#" id="lnk_rectangle" data-pressed="0" data-conv="2">Rectangle</a><br/>
        <a href="#" id="lnk_line" data-pressed="0" data-conv="3">Line</a><br/>
        <a href="#" id="lnk_polyline" data-pressed="0" data-conv="4">PolyLine</a><br/>
    </div>
d3.js drag
1个回答
0
投票

直到现在我可以拖放圆，矩形和直线，但是现在的问题是我必须在菜单中选择要拖放的元素。我需要这样做选择要移动的元素。

这是我的代码：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta charset="UTF-8">
            <title>FAM</title>
            <script type="text/javascript" src="jquery-min.js"></script>
            <script type="text/javascript" src="d3.v4.min.js"></script>
            <script type="text/javascript">
                $(function () {
                    var svg = d3.select('#svf');//.on("mousedown", mousedown).on("mouseup", mouseup);
                    var container = svg.append('g');
                    var pxy = new Array(), line,i=0,j=0;

                    for(i=0;i<500;i=i+10){
                        container.append('line').attr('x1', i).attr('y1', 0).attr('x2', i).attr('y2', 500).attr('stroke', '#CFCECE').attr('stroke-width', 1).attr('fill', 'none');
                    }

                    for(j=0;j<500;j=j+10){
                        container.append('line').attr('x1',1).attr('y1', j).attr('x2', 500).attr('y2', j).attr('stroke', '#CFCECE').attr('stroke-width', 1).attr('fill', 'none');
                    }

                    function main() {
                        pxy = new Array();
                        var coords = d3.mouse(this), x = coords[0], y = coords[1];
                        var lnk = $('#dv_conv').find('a[data-pressed="1"]');
                        var conv = lnk.attr('data-conv');

                        if (conv == 1) {
                            pxy = new Array();
                            container.append('circle').attr('cx', x).attr('cy', y).attr('r', 30).attr('stroke-width', 2).attr('stroke', '#000').attr('fill', 'transparent').on("dblclick", clicked).call(d3.drag().on("start", dragstarted).on("drag", dragged).on("end", dragended));
                        }

                        if (conv == 2) {
                            pxy = new Array();
                            container.append('rect').attr('x', x).attr('y', y).attr('width', 60).attr('height', 60).attr('stroke-width', 2).attr('stroke', '#000').attr('fill', 'transparent').on("dblclick", clicked).call(d3.drag().on("start", dragstarted).on("drag", dragged).on("end", dragended));
                        }

                        if (conv == 3) {
                            //svg.on("click", mousedown).on("dblclick", mouseup);
                        }

                        if (conv == 4) {
                            pxy[pxy.length] = x;
                            pxy[pxy.length] = y;

                            pxy[pxy.length] = x;
                            pxy[pxy.length] = y + 30;

                            pxy[pxy.length] = x + 160;
                            pxy[pxy.length] = y + 30;

                            pxy[pxy.length] = x + 160;
                            pxy[pxy.length] = y;

                            container.append('polyline').attr("stroke", '#000').attr('stroke-width', 1).attr('fill', 'transparent').attr('points', pxy).call(d3.drag().on("start", dragstarted).on("drag", dragged).on("end", dragended));
                            pxy = new Array();
                        }
                    }

                    svg.on('click', main);

                    function mousedown() {
                        var m = d3.mouse(this);
                        line = container.append("line")
                                .attr("x1", m[0])
                                .attr("y1", m[1])
                                .attr("x2", m[0])
                                .attr("y2", m[1]).attr('stroke', '#000').attr('stroke-width', 2).attr('fill', 'transparent').call(d3.drag().on("start", dragstarted).on("drag", dragged).on("end", dragended));
                        svg.on('mousemove', mousemove);
                    }

                    function mousemove() {
                        var m = d3.mouse(this);
                        line.attr('x2', m[0]).attr('y2', m[1]);
                    }

                    function mouseup() {
                        svg.on('mousemove', null);
                        svg.on('click', null);
                    }

                    function dragstarted(d) {
                        d3.select(this).raise().classed('active', true);
                    }

                    function dragged(d) {
                        var lnk = $('#dv_conv').find('a[data-pressed="1"]');
                        var conv = lnk.attr('data-conv');

                        if (conv == 1) {
                            d3.select(this).attr('cx', +d3.select(this).attr('cx') + d3.event.dx);
                            d3.select(this).attr('cy', +d3.select(this).attr('cy') + d3.event.dy);
                        }

                        if (conv == 2) {
                            d3.select(this).attr('x', +d3.select(this).attr('x') + d3.event.dx);
                            d3.select(this).attr('y', +d3.select(this).attr('y') + d3.event.dy);
                        }

                        if (conv == 3 || conv == 4) {
                            this.x = this.x || 0;
                            this.y = this.y || 0;
                            this.x += d3.event.dx;
                            this.y += d3.event.dy;
                            d3.select(this).attr('transform', 'translate(' + this.x + ',' + this.y + ')');
                        }
                    }


                    function dragended(d) {
                        d3.select(this).classed('active', false);
                    }

                    d3.select('body').on('keydown', function () {
                        if (d3.event.keyCode === 27) {
                            pxy = new Array();
                            $('#lnk_circle').attr('data-pressed', 0);
                            $('#lnk_rectangle').attr('data-pressed', 0);
                            $('#lnk_polyline').attr('data-pressed', 0);
                            svg.on('mousemove', null);
                            svg.on('click', null);
                        }
                    });

                    function clicked(d, i) {
                        //alert('');
                    }

                    $('#lnk_circle').click(function () {
                        svg.on('click', main);
                        $('#lnk_rectangle').attr('data-pressed', 0);
                        $('#lnk_line').attr('data-pressed', 0);
                        $('#lnk_polyline').attr('data-pressed', 0);
                        $(this).attr('data-pressed', 1);
                        return false;
                    });

                    $('#lnk_rectangle').click(function () {
                        svg.on('click', main);
                        $('#lnk_circle').attr('data-pressed', 0);
                        $('#lnk_polyline').attr('data-pressed', 0);
                        $('#lnk_line').attr('data-pressed', 0);
                        $(this).attr('data-pressed', 1);
                        return false;
                    });

                    $('#lnk_polyline').click(function () {
                        svg.on('click', main);
                        $('#lnk_circle').attr('data-pressed', 0);
                        $('#lnk_rectangle').attr('data-pressed', 0);
                        $('#lnk_line').attr('data-pressed', 0);
                        $(this).attr('data-pressed', 1);
                        return false;
                    });

                    $('#lnk_line').click(function () {
                        svg.on("click", mousedown).on("dblclick", mouseup);
                        $('#lnk_circle').attr('data-pressed', 0);
                        $('#lnk_rectangle').attr('data-pressed', 0);
                        $('#lnk_polyline').attr('data-pressed', 0);
                        $(this).attr('data-pressed', 1);
                        return false;
                    });


                });
            </script>
            <style>
                line,circle,rect,polyline{ shape-rendering:crispEdges;} 
            </style>                
    </head>
    <body>
        <div id="dv_conv" style="float: left;width:200px;border:1px solid #000;margin-right: 1px">
            <a href="#" id="lnk_circle" data-pressed="0" data-conv="1">Circle</a><br/>
            <a href="#" id="lnk_rectangle" data-pressed="0" data-conv="2">Rectangle</a><br/>
            <a href="#" id="lnk_line" data-pressed="0" data-conv="3">Line</a><br/>
            <a href="#" id="lnk_polyline" data-pressed="0" data-conv="4">PolyLine</a><br/>
        </div>

        <div id="dv_familiogram" style="float: left;width:500px;height: 500px;border:1px solid #000;overflow: hidden">

            <svg id="svf"  style="width:500px;height:500px"></svg>

        </div>
    </body>
</html>

我尝试添加此行，但是没有用。

$('#svf').find('circle,rect,line').on("dblclick", clicked).call(d3.drag().on("start", dragstarted).on("drag", dragged).on("end", dragended));
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.