2015-10-20 65 views
1

我有一个散点图,点击事件和画笔事件都会突出显示点。如果我先刷过一些圆圈,然后单击一个圆圈,画笔仍然可见。如何在D3.js中单击圆圈时隐藏画笔?

我该如何做到这一点,所以当单击一个圆圈时刷子消失,但之后仍然可用?

Here is a JSFiddle.

<!DOCTYPE html> 
<html> 
<meta charset="utf-8"> 
<style> 
#plot{ 
    border-style: solid; 
    border-width: 4px; 
    border-color: lightgray; 
    display: inline-block; 
    line-height: 0; 
} 

circle{ 
    fill: blue; 
} 

.highlight{ 
    fill: red; 
} 
</style> 
<body> 
<script src="d3.js"></script> 
<div id="plot"> 
<script> 

(function(){ 
    var data = []; 
    for(i = 0; i < 100; i++){ 
     var x = Math.random(); 
     var y = Math.random(); 
     data.push({x: x, y: y}); 
    } 

    var xScale = d3.scale.linear() 
     .domain([0, 1]) 
     .range([0, 400]); 

    var yScale = d3.scale.linear() 
     .domain([0, 1]) 
     .range([400, 0]); 

    var svg = d3.select("#plot").append("svg") 
     .attr("width", 400) 
     .attr("height", 400) 

    var brush = d3.svg.brush() 
     .x(xScale) 
     .y(yScale) 
     .on("brushstart", brushstart) 
     .on("brushend", brushend); 

    function brushstart(){ 
     d3.selectAll("circle") 
      .classed("highlight", false); 
    } 

    function brushend(){ 
     var e = brush.extent(); 
     d3.selectAll("circle").filter(function(d){ 
      return xScale(d.x) >= xScale(e[0][0]) && 
        yScale(d.y) <= yScale(e[0][1]) && 
        xScale(d.x) <= xScale(e[1][0]) && 
        yScale(d.y) >= yScale(e[1][1]);            
     }) 
     .classed("highlight", true);      
    } 

    svg.append("g") 
     .classed("brush", true) 
     .call(brush); 

    svg.selectAll("circle") 
     .data(data) 
     .enter().append("circle") 
     .attr("r", 6) 
     .attr("cx", function(d){ return xScale(d.x) }) 
     .attr("cy", function(d){ return yScale(d.y) }) 
     .on("click", function(){ 
      d3.selectAll("circle").classed("highlight", false); 
      d3.select(this).classed("highlight", true); 
     });           
})(); 

</script> 
</div> 
</body> 
</html> 

我能够使刷d3.selectAll("brush").remove()d3.selectAll("brush").style("display", "none")消失,但刷不能事后使用。

回答

3

我想隐藏一刷,仍然能够在事后用它的正确方法,是使用brush.clear()D3 SVG Controls

这样的 - d3.selectAll(".brush").call(brush.clear());

Fiddle

+0

感谢。我曾尝试过,但那是在我正确地将一个班级分配给我的笔刷之前。 – user2829582

+0

不客气! :-) –