javascript - 如何在单击复选框时调用函数,该复选框是单击 d3 元素(如 rect)时的弹出窗口
问题描述
我有一个 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);
}
我没有得到任何解决方案来调用该函数
。感谢任何帮助。先感谢您 :)
解决方案
为什么不d3
按照您已经使用的方式添加事件d3
?
在onClick
函数中,您可以将click
事件绑定到 input#myCheck。
div.select('input#myCheck').on('click', function () {
if(this.checked) // checking if the checkbox is checked
onClaim(d.executionId);
});
请发布一个更容易回答的工作片段(因为您的帖子缺少 等的定义。无论如何div
,mini
我在这里使用示例代码创建了一个片段:
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>
希望这可以帮助。
推荐阅读
- python - 如何使用列作为指标?
- html - 在 ASP.NET Core 的 url 背景中不显示图像模型
- node.js - 更新字段内的 MongoDb 数据
- docker - 通过 ENTRYPOINT 启动 ssh 服务不起作用
- reactjs - 使用箭头函数方法从 useState 调用 set 函数过早重新加载
- sql - 以更简单的方式重写长 T-SQL 查询 (SQL Server 2016)
- vue.js - 如何将一个输入与另一个相关联(改变一个也改变另一个)
- typescript - 如何在 Angular 11 中向 ul li 添加类名
- sql-server - 如何更新 SSIS 数据流任务中的下游组件?
- c - 如何在 C 中正确使用 setvbuf?