顯示並隱藏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/