D3에서 마우스 클릭시 요소 표시 / 숨기기

user6150138

노드를 클릭하면 상자가 나타나고 클릭하면 사라집니다. 지금은 처음부터 나타나며 클릭해도 사라지지 않습니다. 다음은 JSFiddle입니다.

나는 편집이 여기 어딘가에 있다고 가정하려고 노력했지만 내 삶을 위해 그것을 알아낼 수 없습니다. 다른 관련 질문도 확인했지만 특정 문제가 다릅니다.

 var node = svg.selectAll(".node")
  .data(data.nodes)
.enter().append("g")
  .attr("class", "node")
  .on("mouseover", mouseover)
.on("mouseout", mouseout)
 .on("click", function(d) {
  text = "Generic Text Here: " + d.name;
      d3.selectAll(".infobox")  
    //.append("rect")
    //.attr("x", 70)
    //.attr("y", 5)
    //.attr("height", 100)
    //.attr("width", 200) 
    //.select("text")
    .select("a")
    .attr("xlink:href", text) 
    .selectAll("text").text(text)})  
  .call(force.drag);

감사합니다 감사합니다

비 노드 루이스

숨기기 / 표시 외에도 한 노드가 클릭되고 상자가 다른 노드를 클릭하면 상자가 해당 노드 데이터로 표시되어야하는 시나리오도 처리해야한다고 생각합니다.

  if(this.getAttribute("ind") == prev && document.getElementById("plot").style.display == 'block'){
        document.getElementById("plot").style.display = 'none';
    }else{
    document.getElementById("plot").style.display = 'block';}
    prev = i;

이 바이올린을보십시오 http://jsfiddle.net/nw7g157c/9/

이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.

침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제

에서 수정
0

몇 마디 만하겠습니다

0리뷰
로그인참여 후 검토

관련 기사

분류에서Dev

특정 요소에 마우스 오버 할 때 표시 / 숨기기 방법

분류에서Dev

표에서 요소 표시 / 숨기기

분류에서Dev

마우스 오버시 Jquery 표시 클릭시 숨기기

분류에서Dev

다음 요소의 클래스에 따라 요소 표시 / 숨기기

분류에서Dev

한 요소에 대한 스크롤바 숨기기 (클릭 / 이벤트시)

분류에서Dev

reactJS에서 요소 표시 / 숨기기

분류에서Dev

d3.js 클릭 이벤트 표시 / 숨기기 html 요소

분류에서Dev

AngularJS-루트 스코프에서 요소 표시 / 숨기기

분류에서Dev

자바 스크립트에서 요소 숨기기 / 표시

분류에서Dev

mousenter (마우스 오버)시 하위 요소 표시 및 숨기기 (토글)

분류에서Dev

클릭 한 요소에 따라 테이블 열 숨기기 / 표시

분류에서Dev

클릭시 요소 숨기기 요소 숨기기

분류에서Dev

AngularJS : 클릭시 li 요소 숨기기

분류에서Dev

본문 클릭시 요소 숨기기

분류에서Dev

마우스 오버시 div의 하위 요소 숨기기

분류에서Dev

마우스 클릭 시뮬레이션 또는 기본이 아닌 요소에서 키 누르기 입력

분류에서Dev

버튼 클릭시 div 요소 표시 / 숨기기

분류에서Dev

이미지에서 마우스 클릭시 요소 변경

분류에서Dev

D3를 사용하여 마우스 오버시 요소 크기 변경

분류에서Dev

CSS는 스팬 요소를 숨기고 마우스 오버시 표시 할 수 있으며 p 요소에 대해 작동하지 않습니다.

분류에서Dev

jQuery 효과-JQuery는 마우스 클릭시 div 표시 및 숨기기

분류에서Dev

클릭시 팝업 요소 및 HTML 클릭시 숨기기

분류에서Dev

JS / JQuery 요소 숨기기, 텍스트 변경, 요소 표시

분류에서Dev

숨겨진 요소를 표시하고 클릭하려면 요소 위로 마우스를 가져갑니다.

분류에서Dev

요소 숨기기 및 요소 표시

분류에서Dev

실시간 검색에서 목록 요소 표시 / 숨기기

분류에서Dev

여러 요소에 대한 jQuery 압축 표시 숨기기 스크립트

분류에서Dev

jQuery의 동일한 div에서 마우스 오버시 숨기기 및 표시?

분류에서Dev

다른 div를 숨기거나 표시 할 때 클릭 한 요소의 jQuery 토글 클래스

Related 관련 기사

  1. 1

    특정 요소에 마우스 오버 할 때 표시 / 숨기기 방법

  2. 2

    표에서 요소 표시 / 숨기기

  3. 3

    마우스 오버시 Jquery 표시 클릭시 숨기기

  4. 4

    다음 요소의 클래스에 따라 요소 표시 / 숨기기

  5. 5

    한 요소에 대한 스크롤바 숨기기 (클릭 / 이벤트시)

  6. 6

    reactJS에서 요소 표시 / 숨기기

  7. 7

    d3.js 클릭 이벤트 표시 / 숨기기 html 요소

  8. 8

    AngularJS-루트 스코프에서 요소 표시 / 숨기기

  9. 9

    자바 스크립트에서 요소 숨기기 / 표시

  10. 10

    mousenter (마우스 오버)시 하위 요소 표시 및 숨기기 (토글)

  11. 11

    클릭 한 요소에 따라 테이블 열 숨기기 / 표시

  12. 12

    클릭시 요소 숨기기 요소 숨기기

  13. 13

    AngularJS : 클릭시 li 요소 숨기기

  14. 14

    본문 클릭시 요소 숨기기

  15. 15

    마우스 오버시 div의 하위 요소 숨기기

  16. 16

    마우스 클릭 시뮬레이션 또는 기본이 아닌 요소에서 키 누르기 입력

  17. 17

    버튼 클릭시 div 요소 표시 / 숨기기

  18. 18

    이미지에서 마우스 클릭시 요소 변경

  19. 19

    D3를 사용하여 마우스 오버시 요소 크기 변경

  20. 20

    CSS는 스팬 요소를 숨기고 마우스 오버시 표시 할 수 있으며 p 요소에 대해 작동하지 않습니다.

  21. 21

    jQuery 효과-JQuery는 마우스 클릭시 div 표시 및 숨기기

  22. 22

    클릭시 팝업 요소 및 HTML 클릭시 숨기기

  23. 23

    JS / JQuery 요소 숨기기, 텍스트 변경, 요소 표시

  24. 24

    숨겨진 요소를 표시하고 클릭하려면 요소 위로 마우스를 가져갑니다.

  25. 25

    요소 숨기기 및 요소 표시

  26. 26

    실시간 검색에서 목록 요소 표시 / 숨기기

  27. 27

    여러 요소에 대한 jQuery 압축 표시 숨기기 스크립트

  28. 28

    jQuery의 동일한 div에서 마우스 오버시 숨기기 및 표시?

  29. 29

    다른 div를 숨기거나 표시 할 때 클릭 한 요소의 jQuery 토글 클래스

뜨겁다태그

보관