Javascript D3兵力布局：添加&；单击删除节点

我似乎找不到任何其他例子有类似的应用程序，我想我只是问一下

我正试图使用mike bostock提供的很棒的d3.js库来模拟一个时髦的思维导图工具。我仍在努力学习d3，事实证明，这也是基本的编码！我想要的是一块空白画布和3个按钮添加、删除和编辑。我希望非常基本

>P>当您选择“添加”按钮（顶部图像），然后单击空白画布时，将添加一个节点。如果在附近再次单击，将添加另一个节点并链接到第一个节点

选择“删除”按钮（中间图像），然后单击节点将删除该节点和所有触摸链接

选择“编辑”按钮（底部图像）将允许您标记节点

我已经完成了第一步，还有第二步的一半。我遇到的问题是这样的：

单击“添加”按钮一次，添加功能打开有效

添加一些节点有效

再次单击“添加”按钮，添加功能关闭有效

单击画布，不添加任何节点，但可以拖动现有节点有效

单击“删除”按钮一次，删除功能打开有效

单击节点以将其删除已损坏。删除所有内容

再次单击“删除”按钮，删除功能关闭破损

再次单击“添加”按钮，添加功能打开破损

有人对我为什么会遇到这个问题有什么建议吗？他们将如何着手解决这个问题？我认为这与国家选择之间的混淆有关。关闭“删除”函数时，它调用的函数与关闭“添加”函数时调用的函数相同，因此它不知道该做什么，也不做任何操作。。。我认为它们不应该是相互可选择的，但在打开后是否有一个状态保持打开状态？我真的很困惑：(

我希望这其中的某些部分对其他人也有用。 谢谢 赛博

.js以下..>>>

//==D3 STUFFS ======================================================

//height & width of the interactive area
var divh = document.getElementById('container').offsetHeight;
var divw = document.getElementById('container').offsetWidth;

//node size
var radius = 20;

//define the nodes and links as empty data sets
var nodes = [];
var links = [];

//place the interactive area onto the browser UI with the dimensions defined above
var interactiveArea = d3.select("#container").append("svg:svg").attr("width", divw).attr("height", divh);

//enable dragging of node elements
var drag = d3.behavior.drag()
    .origin(Object)
    .on("drag", dragmove);

//define the physics parameters that will take effect on the nodes and links
var force = d3.layout.force()
    .gravity(0.01)
    .charge(-80)
    .linkDistance(60)
.nodes(nodes)
.links(links)
.size([divw, divh]);

//apply the physics parameters defined above on the nodes and links

force.on("tick", function() 
    {
    interactiveArea.selectAll("line.link")
  .attr("x1", function(d) { return d.source.x; })
  .attr("y1", function(d) { return d.source.y; })
  .attr("x2", function(d) { return d.target.x; })
  .attr("y2", function(d) { return d.target.y; });

    interactiveArea.selectAll("circle.node")
  .attr("cx", function(d) { return d.x; })
  .attr("cy", function(d) { return d.y; }); 
    });

//update the position of the object on drag

function dragmove(d) 
    {
d3.select(this)
  .attr("cx", d.x = Math.max(radius, Math.min(divw - radius, d3.event.x)))
  .attr("cy", d.y = Math.max(radius, Math.min(divh - radius, d3.event.y)));
    }

//update the force layout

function update() 
    {
interactiveArea.selectAll("line.link")
  .data(links)
  .enter().insert("svg:line", "circle.node")
  .attr("class", "link")
  .attr("x1", function(d) { return d.source.x; })
  .attr("y1", function(d) { return d.source.y; })
  .attr("x2", function(d) { return d.target.x; })
  .attr("y2", function(d) { return d.target.y; });

interactiveArea.selectAll("circle.node")
  .data(nodes)
  .enter().insert("svg:circle", "circle.cursor")
  .attr("class", "node")
  .attr("cx", function(d) { return d.x; })
  .attr("cy", function(d) { return d.y; })
  .attr("r", 10)
  .call(force.drag);

force.start();
    }

//==============================================================


//==BUTTON & EVENT SELECTOR=======================================

var addCounter = 0;
var removeCounter = 0;
var editCounter = 0;

function addButton_Off()
    {
    //alert("ADD - off");
    document.images["add-button"].src = "love.lost.PNG";
    all_Off();
    return true;
    }

function removeButton_Off()
    {
    //alert("REMOVE - off");
    document.images["remove-button"].src = "love.lost.PNG";
    //all_Off();
    return true;
    }

function editButton_Off()
    {
    //alert("EDIT - off");
    document.images["edit-button"].src = "love.lost.PNG";

    return true;
    }

function addButton()
    {
    addCounter++;
    if (addCounter%2 == 0)
        addButton_Off();
    else
        addButton_On();
        if (removeCounter%2 == 1)
            removeCounter++;
            removeButton_Off();
        if (editCounter%2 == 1)
            editCounter++;
            editButton_Off();

    function addButton_On()
        {
        //alert("ADD - on");
        document.images["add-button"].src = "pop.cloud.PNG";
        add_Nodes();
        return true;
        }
    }

function removeButton()
    {
    removeCounter++;
    if (removeCounter%2 == 0)
        removeButton_Off();
    else
        removeButton_On();
        if (addCounter%2 == 1)
            addCounter++;
            addButton_Off();
        if (editCounter%2 == 1)
            editCounter++;
            editButton_Off();

    function removeButton_On()
        {
        //alert("REMOVE - on");
        document.images["remove-button"].src = "pop.cloud.PNG";
        remove_Nodes();
        return true;
        }
    }

function editButton()

    {
    editCounter++;
    if (editCounter%2 == 0)
        editButton_Off();
    else
        editButton_On();
        if (addCounter%2 == 1)
            addCounter++;
            addButton_Off();
        if (removeCounter%2 == 1)
            removeCounter++;
            removeButton_Off();

    function editButton_On()
        {
        //alert("EDIT - on");
        document.images["edit-button"].src = "pop.cloud.PNG";
        return true;
        }
    }

//=============================================================

//==EVENT ACTIONS========================================================

function all_Off()
    {
    interactiveArea.on("mousedown", function() 
        {
        update();
        });
    }


function add_Nodes()
    {
    //do the following actions when the mouse is clicked on the interactiveArea
    interactiveArea.on("mousedown", function() 
            {
            // add a node under the mouse cursor
            var point = d3.svg.mouse(this),
                node = {x: point[0], y: point[1]},
                n = nodes.push(node);

            nodes.forEach(function(target) 
                {
                var x = target.x - node.x,
                    y = target.y - node.y;
                //if there is a node less than 30 pixels? away, add a link between the 2 nodes
                if (Math.sqrt(x * x + y * y) < 30)
                    {
                    // add links to any nearby nodes
                    links.push({source: node, target: target});
                    }
                });
            update();
            });
    }

function remove_Nodes()
    {
    interactiveArea.on("click", function()
        {
        var point = d3.select(this);
        point.remove();
        update();
        });
    }


//function edit_Nodes()

//==========================================================

body {
  font: 300 36px "Lane - Posh";
  height: 100%;
  width: 100%;
  margin: auto;
  overflow: hidden;
  position: absolute;
  text-align: center;
  background: #fff;
}

#enclosure {
  margin-top: 3%;
 }

#title {
background: #fff;
font: 300 220% "Lane - Posh";
height: 100px;
width: 60%;
margin-left: auto;
margin-right: auto;
}

#button-menu {
background: #eee;
height: 20%;
width: 4%;
position: absolute;
top: 48.0%;
left: 81%;
} 

#add-button {
cursor: pointer;
position: relative;
top: 5%;
}

#remove-button {
cursor: pointer;
position: relative;
top: 5%;
}

#edit-button {
cursor: pointer;
position: relative;
top: 5%;
}

#container {
  height: 60%;
  width: 60%;
  margin: auto;
  margin-top: 1%;
  background: #eee;
  overflow: hidden;
}   

circle.node 
  {
  cursor: pointer;
  stroke: #000;
  stroke-width: .5px;
  }

line.link 
  {
  fill: none;
  stroke: #9ecae1;
  stroke-width: 1.5px;
  }

body {
  font: 300 36px "Lane - Posh";
  height: 100%;
  width: 100%;
  margin: auto;
  overflow: hidden;
  position: absolute;
  text-align: center;
  background: #fff;
}

#enclosure {
  margin-top: 3%;
 }

#title {
background: #fff;
font: 300 220% "Lane - Posh";
height: 100px;
width: 60%;
margin-left: auto;
margin-right: auto;
}

#button-menu {
background: #eee;
height: 20%;
width: 4%;
position: absolute;
top: 48.0%;
left: 81%;
} 

#add-button {
cursor: pointer;
position: relative;
top: 5%;
}

#remove-button {
cursor: pointer;
position: relative;
top: 5%;
}

#edit-button {
cursor: pointer;
position: relative;
top: 5%;
}

#container {
  height: 60%;
  width: 60%;
  margin: auto;
  margin-top: 1%;
  background: #eee;
  overflow: hidden;
}   

circle.node 
  {
  cursor: pointer;
  stroke: #000;
  stroke-width: .5px;
  }

line.link 
  {
  fill: none;
  stroke: #9ecae1;
  stroke-width: 1.5px;
  }