D3 js在单击圆弧时出现角度2弹出窗口

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);
 }   

单击饼形图的弧时，应该弹出一个窗口，我想显示有关该弧的一些数据。我没有弹出窗口。 谁能给我建议...

Answer 1

我觉得您需要在Angular的视图层和对应于显示弹出窗口的代码位置之间建立连接。

因此，在您的HTML中放置一个弹出窗口，并默认使用*ngIf="showPopup"语句将其隐藏。 之后，您将需要在块内做两件事，这将触发弹出窗口的调用：

1. 使用ViewChild装饰器从您的视图中获取该元素，并为此元素设置正确的X，Y位置，以便将其放置在与单击位置完全接近的位置。
2. 将showPopup属性设置为true值，它将出现。

让我知道您在这一方面的进展。 祝好运！

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();

                  }

              }

我已经创建了弹出窗口，如代码所示。 弹出窗口即将到来，但在单击事件上，我需要调用此函数。_myserviceService.reconSrcData（this.recon_name，this.recon_startdate）.subscribe（data1 => {console.log（“返回饼图srccccc数据为” + JSON.stringify（ data1））;}）;

为了通过从Spring MVC通过Ajax调用收集来显示数据。 但是，当我将代码放在click事件中时，它显示了类似“无法读取未定义的属性'reconSrcData'的错误”