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

表示：＆＃34;如果blueLine.active为真，则active为false;如果blueLine.active为false，则active为真＆＃34;。

然后，在函数结束时，会出现实际切换blueLine.active的行：

blueLine.active = active;

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

然后，您根据blueLine.active或active设置不透明度，这并不重要。

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

＆＃13;

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

如何切换此元素？

1 个答案: