CODEWITHSUNDEEP
javascriptjqueryd3.js
Sooraj
Sooraj

Reputation: 10577

Triggering d3 click from jquery

I have a d3 element to which a click event is bound in d3 itself. On some action on a div ( click/hover ) is it possible to trigger the d3 click event ?

Here is what i tried

var vis = d3.select(".container").append("svg")
  .attr("width", "250")
  .attr("height", "100");


var nodeEnter = vis.append("g")
  .attr("class", "node")
  .attr("nodeid","1")
  .on("click", function() {
    console.log("hit");
  });

nodeEnter.append("circle")
  .attr("r", "10")
  .attr("cx", "10")
  .attr("cy", "10");

$( document ).ready(function() {
   $("#sample-div").mouseenter( function(){
     
     //trigger d3 click here
     
     d3.select( "[nodeid='1']")[0].click;  

   } ).mouseleave( function(){
   console.log("mouse-out");
   } );
});
#sample-div
{
   height:20px;
  width:100px;
  background:#ccc;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<div class="container">
</div>

<div id="sample-div">
  Hover here
  
  </div>

Upvotes: 1

Views: 264

Answers (1)

Cyril Cherian
Cyril Cherian

Reputation: 32327

Call the click function directly 

var nodeEnter = vis.append("g")
  .attr("class", "node")
  .attr("nodeid","1")
  .on("click", performClick);


function performClick(k){
  if(!k)
      k = d3.select(this);
    console.log( k, "asdas");
}

Inside Jquery mouse event listener call the performClick function:

$( document ).ready(function() {
   $("#sample-div").mouseenter( function(){
     performClick(d3.select( "[nodeid='1']"))
     //trigger d3 click here

     //d3.select( "[nodeid='1']")[0].click;  

   } ).mouseleave( function(){
   console.log("mouse-out");
   } );
});

working code here

Upvotes: 2

Related Questions