이 요소를 전환하는 방법은 무엇입니까?

Question

d3을 사용하여 기능을 전환하고 있습니다. 클릭 할 때 보이지 않는 객체를 숨기고 싶습니다. 다시 클릭하면 다시 볼 수 있습니다.

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

는 현재, 나는 단지 그것을 클릭하고 개체를 숨길,하지만 난 전환 할 수 없습니다

지금 나는이 기능을 얻었다. 내가 코드에 대한 질문이 있어요

  .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"); 

:이 예에서 http://bl.ocks.org/d3noob/5d621a60e2d1d02086bf

코드를 다음과 같이 외모를 전환 : 나는 그렇게 할 수있는이 좋은 예를 발견했다. 당신은 정의 새로운 변수

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이 false; blueLine.active이 false 인 경우, active는 사실이다."

그리고, 함수의 끝에서, 실제로 전환 라인이 제공 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",()=>{ 
 
\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>