Question

请看我的可编辑图模型。我通过双击来添加从图中删除节点的功能。但是当我双击时一个彩色圆圈，消失不点击节点，但其他节点。怎么了？对不起我的纯英语。

<!DOCTYPE html>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<html>
<head>
    <title>Animating Changes in Force Diagram</title>
    <script src="JS/d3.v3.min.js"></script>
    <style>
        .node {}
    </style>
</head>
<body>
<div id="div0"></div>
<script>
var graph= {
    "nodes" : [
        {"id": 1, "color": "red"},        
        {"id": 2, "color": "green"},        
        {"id": 3, "color": "grey"},        
        {"id": 4, "color": "blue"},        
        {"id": 5, "color": "orange"}
        ]
    }
  svg = d3.select("#div0")
        .append("svg:svg")        
        .attr("width", 960)
        .attr("height", 450)
        .attr("id", "svg")
        .attr("viewBox", "0 0 " + w + " " + h);
    force = d3.layout.force()
        .size([w, h])   
        .start();   
    force.on("tick", tick);         
    nodes = force.nodes();
    node = svg.selectAll(".node")
        .data(nodes);

    for (i = 0; i < graph.nodes.length; i++) {
        addNode(graph.nodes[i].id, graph.nodes[i].color);
    }
 restart();   

function restart() {
    node = node.data(nodes)
    var g=node.enter().insert("circle")
        .attr("class", "node")       
        .on("tick", tick)       
        .on("dblclick", dblClick)          
        .call(force.drag)
        .attr("fill", function (d) {return d.color;})
        .attr("r", 10)
        .attr("style", "cursor: pointer"); 
    node.exit().remove();
    force.start();
}

function addNode(idd, color, xx, yy) {
    nodes.push({id: idd, color: color});
}

function dblClick(d, i) {
    nodes.splice(i, 1);
    restart();
}

function tick() {
    node.attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; });        //    
}

</script>
</body>
</html>

Answer 1

问题在于代码中的Enter，Update和Exit功能。我已经解决了这个问题，并在代码中添加了适当的注释。希望这会有所帮助。

var w = 500,
  h = 300;
var graph = {
  "nodes": [{
      "id": 1,
      "color": "red"
    },
    {
      "id": 2,
      "color": "green"
    },
    {
      "id": 3,
      "color": "grey"
    },
    {
      "id": 4,
      "color": "blue"
    },
    {
      "id": 5,
      "color": "orange"
    }
  ]
}
var svg = d3.select("#div0")
  .append("svg:svg")
  .attr("width", 960)
  .attr("height", 450)
  .attr("id", "svg")
  .attr("viewBox", "0 0 " + w + " " + h);

force = d3.layout.force()
  .size([w, h])
  .nodes(graph.nodes)
  .on("tick", tick)
  .start();

restart();

function restart() {

  var node = svg.selectAll(".node").data(graph.nodes)

  //Add new nodes
  node.enter().insert("circle")
    .attr("class", "node")
    .call(force.drag)
    .on("tick", tick)
    .on("dblclick", dblClick)
    .attr("r", 10)
    .attr("style", "cursor: pointer");

  //Update nodes
  svg.selectAll(".node")
    .attr("fill", function(d) {
      return d.color;
    });

  //Delete nodes
  node.exit().remove();

  force.start();
}

function dblClick(d, i) {
  graph.nodes.splice(i, 1);
  restart();
}

function tick() {
  svg.selectAll(".node").attr("transform", function(d) {
    return "translate(" + d.x + "," + d.y + ")";
  });
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<div id="div0"></div>

从图中删除节点是错误的

1 个答案: