如何在单击复选框时调用函数，该复选框是单击 d3 元素（如 rect）时的弹出窗口

Question

我有一个 d3 元素的矩形，我想点击那个矩形，应该会弹出一个带有复选框的弹出窗口。单击该复选框时，应调用一个函数。
截至目前，当我在 html 中调用一个函数时，该特定函数没有被调用

mini.append("g").selectAll("miniItems")
            .data(data)
            .enter().append("rect")
            .attr("id", "rect")
            .attr("x", 200)
            .attr("y", function(d,i) {return y2(i*1.2)+5;})
            .attr("width", windowWidth - 700)
            .attr("height", 15)
            .attr("stroke", "grey")
            .on("click", onClick);/*on click of d3 element this function is invoked*/

  function onClick(d){
     let content;
    content = "<div style='background: white;width:70px; box-shadow:3px 3px 5px #797878;height:30px; padding:8%'><input type='checkbox' id='myCheck' (click)='onClaim(d.executionId)'></input>"+ "claim" + "</div>";
     div.html(content)
       .style("left", (d3.event.pageX) + "px") 
        .style("top", (d3.event.pageY) + "px")
        .style("display", "block");
   }

 function onClaim(value){/*this function is not executed*/
        console.log(value);
}

我没有得到任何解决方案来调用该函数
任何帮助表示赞赏。提前谢谢你:)

Answer 1

您的代码中的引号存在一些问题。试试这个：

 content = "<div style='background: white;width:70px; box-shadow:3px 3px 5px #797878;height:30px;'>
       <input type='checkbox' onClick='onClaim(d.data);'>
     </div>"

您在 30px; 结尾处关闭了周围的 "。 我用单引号替换了它，并在最后添加了双引号。

Answer 2

Hlo dkshaaa，

你可以试试这个。

由于您使用的是复选框而不是 onClick，因此您可以使用 onChange。

所以不是这个

<input type='checkbox' id='myCheck' (click)='onClaim(d.executionId)'>

你可以使用

<input type="checkbox" id="isCheckBox" (change)="onClaim($event, d.executionId)"/>

在角度组件中，您可以将事件用作

function onClaim(event, execId) {
    if(event.target.checked){
       //DO SOMETHING
    }
}

希望这会有所帮助。 ;-)

Answer 3

为什么不使用d3 方式添加事件，因为您已经在使用d3？

在onClick 函数中，您可以将click 事件绑定到输入#myCheck。

div.select('input#myCheck').on('click', function () {
    if(this.checked) // checking if the checkbox is checked
        onClaim(d.executionId);
});

请发布一个可以更容易回答的有效 sn-p（因为您的帖子缺少 div、mini 等的定义。无论如何，我在这里使用示例代码创建了一个 sn-p：

var svg = d3.select('svg#chart');
var div = d3.select('div.tooltip');

var data = [{id: 1, executionId: 1}, {id: 2, executionId: 2}];

svg.append("g").selectAll("miniItems")
            .data(data)
            .enter().append("rect")
            .attr("id", "rect")
            .attr("x", 100)
            .attr("y", function(d,i) {return (i*100);})
            .attr("width", 100)
            .attr("height", 15)
            .style("stroke", "grey")
            .on("click", onClick);/*on click of d3 element this function is invoked*/

  function onClick(d){
     let content;
    content = "<div style='background: white;width:70px; box-shadow:3px 3px 5px #797878;height:30px; padding:8%'><input type='checkbox' id='myCheck'/>"+ "claim" + "</div>";
     div.html(content)
       .style("left", (d3.event.pageX) + "px") 
        .style("top", (d3.event.pageY) + "px")
        .style("display", "block");
     div.select('input#myCheck').on('click', function () {
     	if(this.checked)
	     	onClaim(d.executionId);
     })
   }

 function onClaim(value){/*this function is not executed*/
        console.log(value);
}

div.tooltip {
      position: absolute;
}

<script src="https://d3js.org/d3.v4.min.js"></script>

<svg id="chart" width="400" height="400"></svg>

<div class="tooltip">

</div>

希望这会有所帮助。