Question

我有一个d3元素，在d3本身中绑定了一个click事件。在div上的某些操作（单击/悬停）是否可以触发d3单击事件？

这是我试过的

＆＃13;

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

＆＃13;

#sample-div
{
   height:20px;
  width:100px;
  background:#ccc;
}

＆＃13;

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

＆＃13;

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

从jquery触发d3单击

1 个答案: