如何切换这个元素？

Question

我正在使用 d3 切换功能。我想让一个可见的对象在我点击时隐藏，当你再次点击时，它会再次可见。

现在我得到了这个功能：

 .on("click", function(d) {         object1.style("visibility", "hidden");}
        )

目前我只能点击它，对象会隐藏，但我不能切换。我找到了这个很好的例子，可以实现它：http://bl.ocks.org/d3noob/5d621a60e2d1d02086bf

在此示例中，切换代码如下所示：

         .on("click", function(){       // Determine if current line is visible
                var active   = blueLine.active ? false : true,
                  newOpacity = active ? 0 : 1;      
  // Hide or show the elements      
    d3.select("#blueLine").style("opacity", newOpacity);
    d3.select("#blueAxis").style("opacity", newOpacity);        
      // Update
         whether or not the elements are active         
      blueLine.active = active;     })
      .text("Blue Line");

我对代码有疑问。你定义一个新变量

var active   = blueLine.active ? false : true

然后你检查，如果当前状态是活跃的，例如如果是，那么 var active = false ?

这意味着下一行：

newOpacity = active ? 0 : 1

在这个例子中类似于newOpacity = false ? 0 : 1意味着newOpacity = 1？那是对的吗？然后，在这一行：

blueLine.active = active

转为blueLine.active = false？希望有人能帮我解决这个困惑，非常感谢！

Answer 1

在您链接的示例中，代码在每次点击时切换的变量（或属性）是 blueLine.active。这一行：

var active   = blueLine.active ? false : true

表示："if blueLine.active is true, active is false; if blueLine.active is false, active is true".

然后，在函数的末尾，出现实际切换 blueLine.active:

的行

blueLine.active = active;

它的作用是：如果当用户点击文本时 blueLine.active 为假，那么 blueLine.active 现在为真；如果用户单击文本时 blueLine.active 为真，则 blueLine.active 现在为假。它在 true 和 false 之间切换（注意：第一次点击文本时，blueLine.active 实际上是未定义的）。

然后，你根据blueLine.active或active设置不透明度，没关系。

您可以使用单个布尔值获得相同的效果：

var circle = d3.select("circle")
var toggle = true;
d3.select("text").on("click", ()=>{
 circle.style("visibility", toggle ? "hidden" : "visible");
 toggle = !toggle;
})

text {
 cursor: pointer;
  font-family: helvetica;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<svg>
 <circle cx="150" cy="100" r="20" fill="teal"></circle>
 <text x="20" y="100">Click me</text>
</svg>

如何切换这个元素？

How to toggle this element?

javascript

function

object

toggle

d3.js