javascript - 从jquery触发d3点击

Question

我有一个 d3 元素，在 d3 本身中绑定(bind)了一个点击事件。在 div 上执行某些操作(点击/悬停)是否有可能触发 d3 点击事件？

这是我尝试过的

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>

Answer 1

直接调用点击函数

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");
}

在 Jquery 鼠标事件监听器中调用 performClick 函数:

$( 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");
   } );
});

工作代码here