javascript - 更新时无法删除 D3 中的圈子

Question

我在删除圈子时遇到了很多麻烦。在此示例中，我想删除标记为“2”的圆圈，但它只是删除数组中的最后一个圆圈。如果取消注释部分并注释 graphNodes.splice(2, 1)，它会像添加一个新圆圈一样工作。但删除不起作用。

我在这里缺少什么？

var width = 640,
      height = 480;

  var graphNodes = [
    { id: 0, x: 39, y: 343, r: 15 },
    { id: 1, x: 425, y: 38, r: 15 },
    { id: 2, x: 183, y: 417, r: 15 },
    { id: 3, x: 564, y: 31, r: 15 },
    { id: 4, x: 553, y: 351, r: 15 },
    { id: 5, x: 454, y: 298, r: 15 },
    { id: 6, x: 493, y: 123, r: 15 },
    { id: 7, x: 471, y: 427, r: 15 },
    { id: 8, x: 142, y: 154, r: 15 }
  ];

  var svg = d3.select('body').append('svg')
      .attr('width', width)
      .attr('height', height);

  svg.append('rect')
      .attr('class', 'graph')
      .attr('width', width)
      .attr('height', height)
      .attr('fill', 'lightblue')
      .attr('opacity', 0.3)
      .on('click', function(){
        /*graphNodes.push({
          x: d3.mouse(this)[0],
          y: d3.mouse(this)[1],
          id: graphNodes.length,
          r: 15
        });*/

        graphNodes.splice(2, 1);

        update();
      });

  var nodeGroup = svg.selectAll('.nodes')
      .data(graphNodes, function(d){ return d.id; })
      .enter().append('g')
      .attr('class', 'node');

  nodeGroup.append('circle')
      .attr('cx', function(d) { return d.x })
      .attr('cy', function(d) { return d.y })
      .attr("r", function(d){ return d.r; })
      .attr("fill", "gray");

  nodeGroup.append('text')
      .attr("dx", function(d){ return d.x + 20; })
      .attr("dy", function(d){ return d.y + 5; })
      .text(function(d) { return d.id });

  function update() {

    if(nodeGroup){

      // Update nodes
      var node = nodeGroup.data(graphNodes),
          nodeEnter = node.enter().append('g')
              .attr('class', 'node');

      nodeEnter.append('circle')
              .attr('cx', function(d) { return d.x; })
              .attr('cy', function(d) { return d.y; })
              .attr('r', function(d){ return d.r; })
              .attr('fill', 'gray');

      nodeEnter.append('text')
          .attr("dx", function(d){ return d.x + 20; })
          .attr("dy", function(d){ return d.y + 5; })
          .text(function(d) { return d.id });

      nodeGroup = nodeEnter.merge(node);
      node.exit().remove();
    }
  }

Fiddle

Answer 1

当您在update函数中重新绑定(bind)数据时，您忘记了您的keyfunction :

var node = nodeGroup.data(graphNodes, function(d){ return d.id; }),

更新fiddle .