この要素を切り替えるにはどうすればいいですか？

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がtrueの場合、activeがfalse; blueLine.activeがfalseの場合、activeは真です"。

そして、関数の最後に、実際に切り替わりラインが来るblueLine.active：

blueLine.active = active; 

それは何：ユーザーがテキストをクリックしたときblueLine.activeがfalseだった場合、blueLine.activeはtrueになりました。ユーザーがテキストをクリックしたときに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>