javascript - D3 : Trouble updating selection

Question

我的 update() 函数遇到问题。在这里，在 svg.append('rect') 中，我有 .on('click')，我只需更改数据，然后运行 ​​update().

为什么这不起作用？我该如何让它发挥作用？

  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[8].id = 'hey there'; //  <----- Why doesn't this happen?

        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, function(d){ return d.id; }),
          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

在您留给我的消息中将此作为评论输入，但这里是作为答案。

您需要将输入、更新和退出时执行的操作分开。输入时，您只想附加并设置任何永不更改的属性。更新时，您想要添加/更改文本并添加/更改半径。退出时删除。这里我已经正确处理了进入、更新、退出范式:

  // bind the data
  var node = nodeGroup.data(graphNodes, function(d){ return d.id; }),
      // this is the enter selection
      nodeEnter = node.enter().append('g')
          .attr('class', 'node');

  // append to enter selection
  // append and set color, we never change color
  nodeEnter.append('circle')
          .attr('cx', function(d) { return d.x; })
          .attr('cy', function(d) { return d.y; })
          .attr('fill', 'gray');

  // again entering, append text and set position
  nodeEnter.append('text')
      .attr("dx", function(d){ return d.x + 20; })
      .attr("dy", function(d){ return d.y + 5; });          

  // nodeGroup is the enter + update selection
  nodeGroup = nodeEnter.merge(node);

  // change the things we want to change on every update
  nodeGroup.select("text")
    .text(function(d) { return d.text ? d.text : d.id });

  nodeGroup.select("circle")
   .attr('r', function(d){ return d.r; })

  // exit, just remove
  node.exit().remove();

<小时/>

运行代码:

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);
        
        graphNodes[Math.floor(Math.random() * graphNodes.length)].text = "Tomato!";
        
        graphNodes[Math.floor(Math.random() * graphNodes.length)].r = Math.random() * 30;
        
        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, function(d){ return d.id; }),
          nodeEnter = node.enter().append('g')
              .attr('class', 'node');
      
      // this is the enter selection
      // append and set color, we never change color
      nodeEnter.append('circle')
              .attr('cx', function(d) { return d.x; })
              .attr('cy', function(d) { return d.y; })
              .attr('fill', 'gray');

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

      // nodeGroup is the enter + update selection
      nodeGroup = nodeEnter.merge(node);
      
      // change the things we want to change on every update
      nodeGroup.select("text")
      	.text(function(d) { return d.text ? d.text : d.id });
        
     	nodeGroup.select("circle")
     		.attr('r', function(d){ return d.r; })
      
      // exit, just remove
      node.exit().remove();
    }
  }

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.5.0/d3.min.js"></script>