I am having a rectangle which is d3 element, I want to click on that rect and a popup should come which will be having checkbox. On click of that checkbox a function should be called.
As of now when I call a function in the html, that particular function is not invoked
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);
}
I am not getting any solution in order to invoke that function
Any help is appreciated. Thank you in advance :)
You have some issues with quotes in your code. Try this:
content = "<div style='background: white;width:70px; box-shadow:3px 3px 5px #797878;height:30px;'>
<input type='checkbox' onClick='onClaim(d.data);'>
</div>"
You were closing the surrounding " at the end of 30px;. I replaced that with a single quote and added a double quote at the very end.
Hlo dkshaaa,
you can try this.
Since you are using checkbox instead of onClick you can use onChange.
So instead of this
<input type='checkbox' id='myCheck' (click)='onClaim(d.executionId)'>
you can use
<input type="checkbox" id="isCheckBox" (change)="onClaim($event, d.executionId)"/>
and in angular component you can use the event as
function onClaim(event, execId) {
if(event.target.checked){
//DO SOMETHING
}
}
hope this helps. ;-)
Why not add events the d3
way as you already are using d3
?
Within the onClick
function, you can bind a click
event to the input#myCheck.
div.select('input#myCheck').on('click', function () {
if(this.checked) // checking if the checkbox is checked
onClaim(d.executionId);
});
And please post a working snippet which makes it easier to answer (as your post was missing definitions of div
, mini
etc. Anyway, I created a snippet using sample code here:
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>
Hope this helps.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.