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"语句隐藏它。之后，您将需要在块内部生成两个应该触发弹出窗口调用的东西：

使用ViewChild装饰器从视图中获取元素，并为此元素设置正确的 X，Y 位置，因此它将完全靠近单击的位置。< / LI>
将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();

                  }

              }

我已经创建了popup，如代码所示。弹出窗口即将到来，但我需要拨打点击事件 this._myserviceService.reconSrcData（this.recon_name，this.recon_startdate）.subscribe（data1 =＆gt; { console.log（“return pie srccccc data is”+ JSON.stringify（data1））; }）;

通过收集来自spring mvc的ajax调用来显示数据。但是当我在click事件中放置代码时，它显示的错误如“无法读取属性'reconSrcData'未定义”

单击饼图弧时，带有角度2弹出的D3 js

2 个答案: