如何切換此元素？

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 

表示： 「如果blueLine.active是真的，active是假的;如果blueLine.active是假的，active是真實的」。

，然後在該函數結束，來自實際切換線路blueLine.active：

blueLine.active = active; 

它所做的是：如果blueLine.active是假的，當用戶單擊文本，blueLine.active現在是真實的;如果blueLine.active在用戶單擊文本時爲true，則blueLine.active現在爲false。它在真和假之間切換（請注意：第一次單擊文本時，blueLine.active實際上未定義）。

然後，您根據blueLine.active或active設置不透明度，這並不重要。再次

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

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

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