How To Open A Modal Clicking On Svg Javascript D3

I'm working on a data visualization proyect, using javascript and d3. In this proyect I'm showing the data using various charts (the data comes from an external source). I'm new in

Solution 1:

You define your bars of your chart as 'rect' dom elements (line with 'bars.append(...)'). As each dom element, you can access it via JavaScript. To access the bars, you have to add an id or class, e.g.:

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

Then you access it and add your onclick event:

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

Or with pure JS:

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

I hope it helps...

Edit: I've forgot your question how to open a modal dialog. There are several ways to achieve to open a modal dialog. The easiest way is to use a library like materializecss or something similar. However, there is a lot of stuff that will be applied to your project.

Here is a simple example, how you can achieve it with jQuery since jQuery keeps the functions simple for the moment.

At first, you have to add a div element which you place in the center of the screen. This div element is hidden by default:

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

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

The z-index is used to guarantee that you modal dialog is in the front of your page.

To avoid the clicking on other elements, we use a further div that uses the whole screen:

//HTML<divid="box"class="modal-box"></div>//CSS.modal-box {
  position:absolute;left:0px;top:0px;width:100%;height:100%;z-index:5;display:none
}

This box is also hidden by default. When you click the bar, then you show both divs, e.g.:

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

If you click on the box, the modal will be closed (as an example):

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

I think, you find out the further steps ;)