在d3.js中显示和隐藏其他元素

时间:2016-10-23 04:29:46

标签: javascript d3.js

我有一个简单的脚本(也在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");

1 个答案:

答案 0 :(得分:1)

每次将鼠标悬停在圈子上时,您都会附加新的SVG。

一个简单而懒惰的解决方案就是删除SVG" mouseout":

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

这是你的小提琴:https://jsfiddle.net/39pmwzzh/