入力と終了を使用してD3 v4のデータを更新しないでください

Question

x、yの位置にテキストを描画する非常に単純な例です。しかし、データを変更して新しいデータで再描画すると何も起こりません。

私は完全なソースは、次xとy位置との非常に簡単、配列データとデータ更新後drawDots関数を呼び出す：

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 = { 
 
\t 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') 
 
\t .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() { 
 
\t const dot = svg.append('g') 
 
\t \t .selectAll('.dot') 
 
    \t .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({ 
 
    \t 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))