Myujth

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 :)

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.

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