I want to have a toggle button in an svg shape, and scale it down when the button is clicked, then scale up when clicked again, firstly I added a class collapse like this. I want to remove the class if it has a class collapse

g.append("circle")
    .classed("collapse", true)
    .attr("cx", 0)
    .attr("cy", 0)
    .attr("r", radius * 0.4 - 10)
    .attr("fill", color(radius * 0.4 - 10))
    .on("click", (d) ->
      if(hasClass("collapse")) # HOW DO I DO THIS
    )

I want to have a toggle button in an svg shape, and scale it down when the button is clicked, then scale up when clicked again, firstly I added a class collapse like this. I want to remove the class if it has a class collapse

g.append("circle")
    .classed("collapse", true)
    .attr("cx", 0)
    .attr("cy", 0)
    .attr("r", radius * 0.4 - 10)
    .attr("fill", color(radius * 0.4 - 10))
    .on("click", (d) ->
      if(hasClass("collapse")) # HOW DO I DO THIS
    )

• javascript
• jquery
• svg
• d3.js

4 Answers 4

You can do this with the DOM API:

g.append("circle")
    .classed("collapse", true)
    .attr("cx", 0)
    .attr("cy", 0)
    .attr("r", radius * 0.4 - 10)
    .attr("fill", color(radius * 0.4 - 10))
    .on("click", (d) ->
      if(this.classList.contains("collapse")) {
        // ...
        // this.classList.remove('collapse')
      } else {
        // ...
        // this.classList.add('collapse')
      }
    )    

Or jQuery:

g.append("circle")
    .classed("collapse", true)
    .attr("cx", 0)
    .attr("cy", 0)
    .attr("r", radius * 0.4 - 10)
    .attr("fill", color(radius * 0.4 - 10))
    .on("click", (d) ->
      if($(this).hasClass("collapse")) {
        // ...
      }
    )

The this inside the call backs refers to the DOM Element. This is, however, not quite the D3-isque way of doing things. One should save the collapsed status on the data associated with the node and act on it rather than save the status in the class of the DOM elements.

Musically_ut's solution is correct, but only supported by last browsers (e.g. Safari 6.0.5 and before won't work, which is a release of June 5, 2013)

The tricky part here is that the SVG DOM is different to the HTML DOM. So you cannot just use classList.contains for older browsers. (see basic jsfiddle parison between SVG and HTML)

Here is a [less beautiful] version which works with older browsers. (jsfiddle)

g.append("circle")
    .classed("collapse", true)
    .attr("cx", 50)
    .attr("cy", 50)
    .attr("r", radius * 0.4 - 10)
    .attr("fill", 'black')
    .on('click', function(d){
        this.setAttribute('class', '');
        // or if your element has other classnames as well
        // scan the class names, remove the "collapse" from it and push the new string into class.
        //if(this.className.baseVal.indexOf('collapse')>=0){ … }
    }
   );

The code in the question looks like CoffeeScript rather than pure JavaScript. If that is the case then d3.js way would be:

.on "click", ->
  d3.select(this).classed("collapse", false) unless d3.select(this).select(".collapse").empty()

Try this, though it is too simple:

enter code hereg.append("circle")
.classed("collapse", true)
.attr("cx", 0)
.attr("cy", 0)
.attr("r", radius * 0.4 - 10)
.attr("fill", color(radius * 0.4 - 10))
.on("click", (d)) {

  var this_ = d3.select(this);

    if(this_.select(".collapse").attr("visibility") == "visible") {

      this_.select(".collapse").attr("visibility", "hidden");

    } else {

      this_.select(".collapse").attr("visibility", "visible");

    }

});