Hiding a (svg:g) element on mouse click event

[Muhammad Adeel Chaudary]

Dear All,

              I have a graphical element (svg:g) and i want to hide it on mouse click event. What attribute I have to used?

              Here is some code snippet

var g = vis.selectAll("g")

    .data(data)

    .enter().append("svg:g")

    .attr("fill", function(d, i) { return fill(i); })

    .attr("transform", function(d, i) { return "translate(" + y1(i) + ",0)"; });

    

var rec = g.selectAll("rect")

    .data(Object)

    .enter().append("svg:rect")

    .attr("transform", function(d, i) { return "translate(" + y0(i) + ",0)"; })

    .attr("width", y1.rangeBand())

    .attr("height", x)

    .attr("y", function(d) { return h - x(d); });

I want to hide var g. thanks

--

Best Regards,

Muhammad Adeel Chaudary

BIT-10-A

[Alex Simoes]

You could do either of the following, setting the opacity to 0:

g.attr("opacity", 0);

Or setting the display style to none:

g.style("display", "none");

By using the mouseover event of say a button, you do this via:

d3.select("button").on("click", function(){

    // code to hide element

    g.style("display", "none");

})

- alex

[Per York]

<script type="text/javascript">
function toggle_visibility(id) {
var e = document.getElementById(id);
if(e.style.display == 'block')
e.style.display = 'none';
else
e.style.display = 'block';
}
</script>

<a href="#" onclick="toggle_visibility('foo');toggle_visibility('foo2_too');">Click here to toggle visibility of element #foo</a>
<div id="foo" style="display:block">This is foo</div>