SVG javascript d3을 클릭하는 모달을 여는 방법

Question

저는 javascript와 d3를 사용하여 데이터 시각화 프로젝트를 진행하고 있습니다. 이 proyect에서는 다양한 차트를 사용하여 데이터를 표시합니다 (데이터는 외부 소스에서 제공됨). 나는이 언어로 새롭기 때문에 인터넷의 다른 부분에있는 코드 조각을 사용하고 있으며 많은 부분이 서로 호환되도록하기 위해 조각을 편집하는 데서 비롯됩니다.

저는 차트를 성공적으로 배포했습니다 (자바 스크립트와 HTML로 시작한 지 일주일 전부터 저에게 커다란 업적입니다). 이제 나는 차트의 바를 클릭하거나 적어도 레이블에 클릭 할 때 모달을 열 수 있기를 원하지만 그와 관련된 문제가 있습니다.

이

차트에서 막대를 정의하는 방법입니다 :

var vakken = svg.selectAll(".question") 
    .data(data) 
.enter().append("g") 
    .attr("class", "bar") 
    .attr("transform", function(d) { return "translate(0," + y(d.Question) + ")"; }); 

var bars = vakken.selectAll("rect") 
    .data(function(d) { return d.boxes; }) 
.enter().append("g").attr("class", "subbar"); 

bars.append("rect") 
    .attr("height", 16) 
    .attr("x", function(d) { return (x(d.x0)); }) 
    .attr("width", function(d) { return (x(d.x1) - x(d.x0)); }) 
    .style("fill", function(d) { return color(d.name); }); 

이를 달성하는 방법에 대한 댓글이 이해 될 것이다

Answer 1

(그리고 나를 조롱 주시기, 내가 가지 그럴만 한 자격이) 차트의 막대를 'rect'dom 요소 ('bars.append (...)'행)로 정의합니다. 각 DOM 요소는 자바 스크립트를 통해 액세스 할 수 있습니다.

$("#bar01").click(function(e) { ... }); 

또는 순수 JS :

document.getElementById("bar01").onclick = function(e) { ... }; 

그리고 당신이 그것을 액세스하고 onclick 이벤트를 추가

bars.append("rect").attr("id", "bar01")... 

: 막대에 액세스하려면, 당신은 ID 또는 클래스, 예를 추가해야

도움이 되었기를 바랍니다 ...

편집 : 모달 대화 상자를 여는 방법에 대한 질문을 잊어 버렸습니다. 모달 대화 상자를 여는 방법에는 여러 가지가 있습니다. 가장 쉬운 방법은 materializecss 또는 이와 유사한 라이브러리를 사용하는 것입니다. 그러나 프로젝트에 적용될 많은 것들이 있습니다.

jQuery는 함수를 간단하게 유지하기 때문에 jQuery로 어떻게 구현할 수 있는지 간단한 예제가 있습니다.

처음에는 화면 가운데에 배치 할 div 요소를 추가해야합니다. 이 div 요소는 기본적으로 숨겨져 있습니다 :

// HTML 
<div id="modal01" class="modal">Blabla</div> 

// CSS 
.modal { 
    position: absolute; 
    left: ... 
    ... 
    display: none; 
    z-index: 10; 
} 

Z- 인덱스이 당신 모달 대화 상자가 페이지의 전면에 있음을 보장하기 위해 사용됩니다.

// HTML 
<div id="box" class="modal-box"></div> 

// CSS 
.modal-box { 
    position: absolute; 
    left: 0px; 
    top: 0px; 
    width: 100%; 
    height: 100%; 
    z-index: 5; 
    display: none 
} 

이 box도 기본적으로 숨겨져 있습니다 :

가 다른 요소에 클릭을 방지하기 위해, 우리는 전체 화면을 사용하는 더 DIV를 사용합니다. 당신이 막대를 클릭하면 다음 두 div의 표시, 예를 들면 : 당신이 상자를 클릭하면

$("#bar01").click(function (e) { 
    $("#modal01").show(); 
    $("#box").show(); 
}); 

것은, 모달은 (예를 들어) 종료됩니다 :

$("#box").click(function (e) { 
    $("#modal01").hide(); 
    $("#box").hide(); 
}); 

내가 당신을 생각 추가 단계 알아보기)