Javascript 在D3.js中单击圆时如何隐藏画笔？_Javascript_D3.js_Svg

Javascript 在D3.js中单击圆时如何隐藏画笔？

javascript d3.js svg

Javascript 在D3.js中单击圆时如何隐藏画笔？,javascript,d3.js,svg,Javascript,D3.js,Svg,我有一个带有点击事件和画笔事件的散点图，这两个事件都突出显示了点。如果我先在一些圆上画笔，然后单击单个圆，画笔将保持可见如何使画笔在单击单个圆时消失，但之后仍然可用我可以使用d3.selectAllbrush.remove或d3.selectAllbrush.styledisplay使画笔消失，只有画笔以后才能使用。我认为隐藏画笔并在以后仍能使用画笔的正确方法是使用画笔。清除像这样-d3.selectAll.brush.callbrush.clear 谢谢我以前试过，但那是在我正确地为我的

我有一个带有点击事件和画笔事件的散点图，这两个事件都突出显示了点。如果我先在一些圆上画笔，然后单击单个圆，画笔将保持可见

如何使画笔在单击单个圆时消失，但之后仍然可用

我可以使用d3.selectAllbrush.remove或d3.selectAllbrush.styledisplay使画笔消失，只有画笔以后才能使用。

我认为隐藏画笔并在以后仍能使用画笔的正确方法是使用画笔。清除

像这样-d3.selectAll.brush.callbrush.clear

谢谢我以前试过，但那是在我正确地为我的画笔分配一个类之前。

<!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>