使用enter和exit not working更新D3 v4中的数据

Question

在x，y位置绘制文字的非常简单的示例。但是，当我更改数据并使用新数据重绘时，没有任何事情发生。

我在更新数据后调用drawDots函数，数据非常简单，包含x和y位置的数组，请遵循完整的来源：

const data = [
  {"id": "A", "x": 2000, "y": 2000 },
  {"id": "B", "x": 5000, "y": 5000 },
  {"id": "C", "x": 10000, "y": 10000 }
]

const letters = "DEFGHIJKLMNOPQRSTUVXWYZ".split('')

const el = document.getElementById("matrix")

const SIZE = {width: el.offsetWidth, height: el.offsetHeight};
const DOMAIN = {x: [20000, 0], y: [0, 20000]};
const SCALES = {
	x: d3.scaleLinear().range([SIZE.width, 0]).domain(DOMAIN.x),
  y: d3.scaleLinear().range([0,  SIZE.height]).domain(DOMAIN.y)
}

// Draw board
const chart = d3.select(el)
    .append('svg:svg')
    .attr('width', SIZE.width)
    .attr('height', SIZE.height)
    .attr('class', 'chart');
    
const svg = chart.append('g')
	.attr('transform', `translate(0, 0`)
  .attr('width', SIZE.width)
  .attr('height', SIZE.height)
  .attr('class', 'main')

// Handle Event to update D3
$(el).bind("updateD3", function () {
	const dot = svg.append('g')
		.selectAll('.dot')
  	.data(data)
    .enter()
    .append("g")
    .attr('class', 'dot')

  const circle = dot
    .append("circle")
    .attr('class', 'circle')
    .attr('cx', d => SCALES.x(d.x))
    .attr('cy', d => SCALES.y(d.y))
    .attr('fill', 'black')
    .attr('r', '9')
  
  const letter = dot
    .append("text")
    .attr('class', 'letter')
    .attr('x', d => SCALES.x(d.x))
    .attr('y', d => SCALES.y(d.y))
    .attr('text-anchor', 'middle')
    .attr('fill', 'white')
    .attr('alignment-baseline', 'central')
    .text(d => d.id)
    
  dot.exit().remove()
});

$(el).trigger("updateD3");

// Handle Button Clicks
$("#update").click(function() {
  const idx =  _.random(0, data.length-1)
  data[idx].x = _.random(0, 20000);
  data[idx].y = _.random(0, 20000);
  console.log('Modified object %s: %O', data[idx].id, data[idx])
  $(el).trigger("updateD3");
})

$("#add").click(function() {
  data.push({ 
  	id: letters.shift(), 
    x: _.random(0, _.max(DOMAIN.x)), 
    y: _.random(0, _.max(DOMAIN.y)) 
  })
  console.log('Add object %O', data[data.length-1])
  $(el).trigger("updateD3");
})

$("#remove").click(function() {
  let dataRemoved = data.pop()
  letters.unshift(dataRemoved.id)
  console.log('Remove object %O', dataRemoved, data, letters)
  $(el).trigger("updateD3");
})

html, body: {
  height: 100%;
  width: 100%;
}
#matrix {
  border: 1px solid black;
  min-height: 300px;
}

<script src="https://d3js.org/d3.v4.min.js"></script>
<script src="https://cdn.jsdelivr.net/lodash/4.17.4/lodash.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    
<button id="update"> Update data </button>
<button id="remove"> Remove data </button>
<button id="add"> Add data </button>
<br><hr>
<div id="matrix"> </div>

Answer 1

jsfiddle.net/kds6wkh0

更新选择：

let dot = svg
        .selectAll('.dot')
    .data(data,d=>d.id)
  dot.select('circle')
    .attr('cx', d => SCALES.x(d.x))
    .attr('cy', d => SCALES.y(d.y))
    dot.select('text')
    .attr('x', d => SCALES.x(d.x))
    .attr('y', d => SCALES.y(d.y))