javascript - D3 强制布局：单击时添加和删除节点

Question

我似乎找不到与我正在尝试做的事情有类似应用的任何其他示例，所以我想我只是问一下。

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

当您选择“添加”按钮（顶部图像），然后单击空白画布时，将添加一个节点。如果您在附近再次单击，将添加另一个节点并将链接到第一个节点。
选择“删除”按钮（中间图像）然后单击一个节点将删除该节点和所有接触的链接。
选择“编辑”按钮（底部图像）将允许您标记节点。

我有第 1 步和第 2 步的一半。我遇到的问题是这样的：

单击“添加”按钮一次，添加功能打开。作品
添加一些节点。作品
再次点击“添加”按钮，添加功能被“关闭”。作品
单击画布，没有添加节点，但现有节点是可拖动的。作品
单击“删除”按钮一次，删除功能打开。作品
单击一个节点将其删除。破碎。删除一切。
再次单击“删除”按钮，删除功能已“关闭”。破碎的
再次点击“添加”按钮，添加功能开启。破碎的

有没有人对我为什么会遇到这个问题以及他们将如何解决这个问题有任何建议？我认为这与状态选择之间的混淆有关。关闭“删除”功能时，它会调用与关闭“添加”功能时相同的功能，因此它不知道该做什么，什么也不做……我认为它们不应该是相互选择的，但是开启后保持开启的一种状态？我真的很难过:(

我希望其中的某些部分也对其他人有用。谢谢！塞布

.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()

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

html 下面...>>>>

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
        <link type="text/css" rel="stylesheet" href="style.css">
        <script src="http://code.jquery.com/jquery-latest.js"></script>
    </head>

    <body>
        <div id="enclosure">
            <div id="title">
            /
            </div>
            <div id="button-menu">

                <a onMouseDown="return addButton()">
                    <img name="add-button" id="add-button-img" src="love.lost.PNG" width="80px" height="80px" border = "0" alt="fuchs">
                </a>
                <a onMouseDown="return removeButton()">
                    <img name="remove-button" id="remove-button-img" src="love.lost.PNG" width="80px" height="80px" border = "0" alt="fuchs">
                </a>
                <a onMouseDown="return editButton()">
                    <img name="edit-button" id="edit-button-img" src="love.lost.PNG" width="80px" height="80px" border = "0" alt="fuchs">
                </a>

            </div>
            <div id="container">
                <script type="text/javascript" src="http://mbostock.github.com/d3/talk/20111116/d3/d3.js"></script>
                <script type="text/javascript" src="http://mbostock.github.com/d3/talk/20111116/d3/d3.geom.js"></script>
                <script type="text/javascript" src="http://mbostock.github.com/d3/talk/20111116/d3/d3.layout.js"></script>
                <script type="text/javascript" src="bonquiqui.js"></script>
                <!--<script type="text/javascript" src="origin.js"></script>-->

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

下面的CSS..>>>>

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;
  }

javascript - D3 强制布局：单击时添加和删除节点

0 回答 0

Related

Reference