d3 js 知道 svg 形状是否有类答案

【问题标题】：d3 js know if an svg shape has a classd3 js 知道 svg 形状是否有类
【发布时间】：2013-11-16 05:35:30
【问题描述】：

我想有一个 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
    )

【问题讨论】：

标签： javascript jquery svg d3.js

【解决方案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 风格的做事方式。应该将collapsed 状态保存在与节点关联的data 上并对其进行操作，而不是将状态保存在DOM 元素的class 中。

【讨论】：

【解决方案2】：

Musically_ut 的解决方案是正确的，但仅支持最后的浏览器（例如 Safari 6.0.5 及之前版本将无法工作，is a release of June 5, 2013）

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

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

【讨论】：

【解决方案3】：

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

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

【讨论】：

【解决方案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");

    }

});

【讨论】：