d3.jsの追加要素の表示と非表示

Question

私は与えられたデータから散布図を描画する簡単なスクリプト（JSFiddleにもあります）を持っています。散布図のデータポイントを調べると、スクリプトは自分のグラフの下に赤い円を表示します。逆の場合は、イベント「mouseout」が呼び出されて円が消えるはずです。

"mouseover"イベントが呼び出されたときに赤い円が表示されますが、円は他の円に追加されます。この場合、表示/非表示の機能を正しく実装する方法は不思議です。

コードは以下に貼り付けられています。

var data = [[4,3], [3,3], [1,4], [2,3]]; 

var margin = {top: 20, right: 15, bottom: 60, left: 60}, 
    width = 500 - margin.left - margin.right, 
    height = 250 - margin.top - margin.bottom; 

var x = d3.scale.linear() 
    .domain([0, d3.max(data, function(d) { return d[0]; })]) 
    .range([ 0, width ]); 

var y = d3.scale.linear() 
    .domain([0, d3.max(data, function(d) { return d[1]; })]) 
    .range([ height, 0 ]); 

var chart = d3.select('body') 
    .append('svg:svg') 
    .attr('width', width + margin.right + margin.left) 
    .attr('height', height + margin.top + margin.bottom) 
    .attr('class', 'chart') 

var main = chart.append('g') 
    .attr('transform', 'translate(' + margin.left + ',' + margin.top + ')') 
    .attr('width', width) 
    .attr('height', height) 
    .attr('class', 'main') 

// Draw the x axis 
var xAxis = d3.svg.axis() 
    .scale(x) 
    .orient('bottom'); 

main.append('g') 
    .attr('transform', 'translate(0,' + height + ')') 
    .attr('class', 'main axis date') 
    .call(xAxis); 

// draw the y axis 
var yAxis = d3.svg.axis() 
    .scale(y) 
    .orient('left'); 

main.append('g') 
    .attr('transform', 'translate(0,0)') 
    .attr('class', 'main axis date') 
    .call(yAxis); 

var g = main.append("svg:g"); 

g.selectAll("scatter-dots") 
    .data(data) 
    .enter().append("svg:circle") 
    .attr("cx", function (d,i) { return x(d[0]); }) 
    .attr("cy", function (d) { return y(d[1]); }) 
    .attr("r", 5); 

// FUNCTION TO DISPLAY CIRCLE BELO CHART 
g.on('mouseover', function(){ 
    div.style("display", "block") 
    div.append("svg") 
    .attr("width", 50) 
    .attr("height", 50) 
    .append("circle") 
    .attr("cx", 25) 
    .attr("cy", 25) 
    .attr("r", 25) 
    .style("fill", "red"); 
}); 

g.on('mouseout', function(){ 
    div.style("display", "none") 
}); 

var div = d3.select("body") 
    .append("div") 
    .attr("class", "tooltip") 
    .style("display", "none"); 

Answer 1

サークルを移動するたびに新しいSVGが追加されます。

簡単かつ怠惰な解決策は、 "マウスアウト" にSVGを削除されています

g.on('mouseout', function(){ 
    div.select("svg").remove(); 
}); 

ここにあなたのフィドルは次のとおりです。https://jsfiddle.net/39pmwzzh/