改变svg方法之间的交互

Question

我有一个可以拖放的圆圈。我在html中创建了2个按钮，一个Button用于将交互更改为Line-Drawing。另一个按钮将再次变回Drag＆amp; Drop。

但是如果单击按钮进行线条绘制，我再也不能回到Drag＆amp; Drop了。如何在交互之间进行切换？ Code-Snippet低于。

HTML：

    $("body").on('click', "#paint", function () {
       interaction = "paint";
       paint();
    });
    $("body").on('click', "#drag", function () {
       interaction = "drag";
       paint();
    });

    var interaction = "drag";

    function paint() {

    if (interaction == "paint") {

        renderPath = d3.svg.line()
                .x(function (d) {
                    return d[0];
                })
                .y(function (d) {
                    return d[1];
                })

        var svg = d3.select(document.getElementsByTagName("svg")[0])
                .call(d3.behavior.drag()
                        .on("dragstart", dragstarted)
                        .on("drag", dragged)
                        .on("dragend", dragended));

    }

    function dragstarted() {
        if (interaction == "paint") {
            activeLine = svg.append("path").datum([]).attr("class", "line").attr("id", s).attr("stroke", colorChange);
        }
    }

    function dragged() {
        if (interaction == "paint") {
            activeLine.datum().push(d3.mouse(this));
            activeLine.attr("d", renderPath);
        }
    }

    function dragended() {
        if (interaction == "paint") {
            capture1();
            activeLine = null;
        }
    }      
}
<div class="col-lg-1">
     <button type="button" class="btn btn-default" style="width:90px" id="paint">Draw</button>
     <br>
     <br>
     <button type="button" class="btn btn-default" style="width:90px" id="drag">Drag&Drop</button></div>

JS：

var GraphCreator = function (svg, nodes, edges, graphData) {
    var thisGraph = this; 
    ....

    thisGraph.drag = d3.behavior.drag()
        .origin(function (d) {
            return {x: d.x, y: d.y};
        })
        .on("drag", function (args) {
            thisGraph.state.justDragged = true;
            thisGraph.dragmove.call(thisGraph, args);

        })
}
GraphCreator.prototype.dragmove = function (d) {
     var thisGraph = this;

     thisGraph.dragLine.attr('d', 'M' + d.x + ',' + d.y + 'L' + d3.mouse(thisGraph.svgG.node())[0] + ',' + d3.mouse(this.svgG.node())[1]);

     d.x += d3.event.dx;
     d.y += d3.event.dy;

     thisGraph.updateGraph();
}