使用Enter和Exit無法更新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(dx)) .attr('cy', d => SCALES.y(dy)) .attr('fill', 'black') .attr('r', '9') const letter = dot .append("text") .attr('class', 'letter') .attr('x', d => SCALES.x(dx)) .attr('y', d => SCALES.y(dy)) .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))