Question

我希望在svg形状中有一个切换按钮，并在单击按钮时缩小它，然后再次单击时向上扩展，首先我添加了一个类collapse。我想删除该类，如果它有一个类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
    )

Answer 1

您可以使用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')
      }
    )

或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")) {
        // ...
      }
    )

回调中的this是指DOM元素。然而，这并不是D3-isque的做事方式。应该将collapsed状态保存在与节点关联的data上并对其进行操作，而不是将状态保存在DOM元素的class中。

Answer 2

Musically_ut的解决方案是正确的，但只有最后的浏览器支持（例如Safari 6.0.5以及以前的浏览器不起作用，is a release of June 5, 2013）

这里棘手的部分是SVG DOM与HTML DOM不同。因此，您不能仅对旧版浏览器使用classList.contains。（SVG和HTML之间的see basic jsfiddle comparison）

这是一个适合旧浏览器的[不太漂亮]版本。（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){ … }
    }
   );

Answer 3

问题中的代码看起来像CoffeeScript而不是纯JavaScript。如果是这种情况，那么d3.js方式将是：

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

Answer 4

试试这个，虽然这太简单了：

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");

    }

});

d3 js知道svg形状是否有类

4 个答案: