D3 js with angular 2 popup on clicking the arc of pie

Question

 public drawPie() {
 let g = this.svg.selectAll(".arc")
                .data(this.pie(this.Stats))
                      .enter().append("g")
                .attr("class", "arc");
g.append("path").attr("d", this.arc)
                 .on("click",function(event){ console.log(JSON.stringify(event))
                     alert("hello");
                  var person = {
                  fullName: function() {
                    alert("hai");
                   // I want popup code here on click event.                                               
                  }
              }

              person.fullName();
                  ;})

                .style("fill", (d: any) => this.color(d.data.key) );
g.append("text").attr("transform", (d: any) => "translate(" + this.labelArc.centroid(d) + ")")
                .attr("dy", ".35em")
                .text((d: any) => d.data.key+": "+d.value);
 }   

On clicking the arc of pie chart one popup should come and I want to display some data regarding that arc.I am not getting popup. can anyone give me suggestion...

Answer 1

I feel like you need to make a connection between view layer of Angular and the place of code which corresponding to showing the popup.

So, place a popup inside of your HTML, and hide it by default with the some *ngIf="showPopup" statement. After, you will need to make two things inside the block which should trigger the call of the popup:

1. Using ViewChild decorator get the element from your view, and set right X, Y positions for this element, so it will be placed exactly close to the place it was clicked.
2. Set showPopup property to the true value, so it will appear.

Let me know about your progress on this one. Good luck!

Answer 2

  .on("click",function(event){ console.log(JSON.stringify(event))

                 this.parameter_name=event.data.key;
                 console.log("the clicked paramter name is"+ this.parameter_name);
                 var person = {
                  fullName: function() {
                    var newDiv = document.createElement("div");  

                    newDiv.innerHTML +='<div id="popup" style=" position: absolute;width: 900px ;z-index: 999;display: none;top:150px;margin-left: 350px;margin-right:500px;background-color: #fff;  border: 1px solid #ddd;  border-radius: 5px;  box-shadow: 0 2px 8px #aaa;  overflow: hidden;   padding: 10px;">'+
                    '<div class="popup_body table-responsive" style="  height: 500px; margin-bottom:10px; ">Recon Report'+                                  
                    '<table class="table table-striped table-bordered table-hover"><thead class="thead-inverse"><tr>'+
                         '<th>#</th>'+
                         '<th>First Name</th>'+
                         '<th>Last Name</th>'+
                         '<th>Username</th><th>Username</th><th>Username</th><th>Username</th><th>Username</th><th>Username</th><th>Username</th><th>Username</th><th>Username</th><th>Username</th><th>Username</th><th>Username</th><th>Username</th><th>Username</th><th>Username</th><th>Username</th><th>Username</th><th>Username</th><th>Username</th><th>Username</th><th>Username</th><th>Username</th><th>Username</th></tr></thead>'+
                         '<tbody><tr *ngFor="let employee of allEmployees">'+
                         '<td>abc</td>'+
                         '<td>abc</td>'+
                         '<td>abc</td></tr>'+



                    '</tbody></table></div>'+
                    '<button type="button" class="btn btn-primary pull-right" style="margin:5px"  onClick="(function(){ var el = document.getElementById(\'popup\'); el.style.display = \'none\'; document.body.style.background = \'white\';})();">close</button>'+
                    '<button type="button" class="btn btn-primary pull-right" style="margin:5px" onClick="(download_csv())">Download CSV</button></div>
                    var currentDiv = document.getElementById("main_container"); 
                    document.body.insertBefore(newDiv, currentDiv); 

                    // open popup onClick
                    openPopup();

                  }

              }

I have created popup as shown in the code. The popup is coming but on click event I need to call this._myserviceService.reconSrcData(this.recon_name,this.recon_startdate).subscribe(data1 =>{ console.log("the return pie srccccc data is"+ JSON.stringify(data1)); });

inorder to display the data by collecting through ajax call from spring mvc. But when I placed the code in click event it was showing error like "Cannot read property 'reconSrcData' of undefined"