D3 Force Layout：添加＆amp;单击时删除节点

时间：2012-11-27 06:26:17

标签： javascript html d3.js force-layout mindmapping

我似乎找不到任何其他类似于我正在尝试做的应用的例子，所以我想我只是问。

我正在尝试使用mike bostock中令人敬畏的d3.js库来模拟一个时髦的思维导图工具。我还在努力学习d3，因为它也证明了基本编码！我想要的是一个空白画布和3个按钮; '添加'，'删除'＆amp; '编辑'。我希望非常基本！

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

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

  3. 选择“编辑”按钮（底部图片）可以标记节点。

    4. 我有第1步，第2步。我遇到的问题是这样的：

    1. 点击“添加”按钮一次，添加“打开”功能。的工程
    2. 添加一些节点。的工程
    3. 再次点击“添加”按钮，添加“关闭”功能。的工程
    4. 单击画布，不添加任何节点，但现有节点可拖动。的工程
    5. 点击“删除”按钮一次，删除“打开”功能。的工程
    6. 单击节点将其删除。的断即可。删除所有内容。
    7. 再次点击“删除”按钮，删除“关闭”功能。的断
    8. 再次点击“添加”按钮，添加“打开”功能。的断

      9. 有没有人对我为什么遇到这个问题提出任何建议？他们将如何解决这个问题？我认为这与州选择之间的混淆有关。当关闭'删除'功能时，它调用与关闭'添加'功能时相同的功能，因此它不知道该做什么，什么都不做......我认为它们不应该是可以相互选择的，而是一个状态在打开后仍然保持？我真的很难过:(

      我希望这部分内容对其他人也有用。 谢谢！ SEB

      .js以下..＆gt;＆gt;＆gt;＆gt; 

      //==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 ...＆gt;＆gt;＆gt;＆gt; 

      <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 ..＆gt;＆gt;＆gt;＆gt; 

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

0 个答案:

没有答案
相关问题
最新问题