d3圈onclick事件未開始

Question

我以svg開頭，並創建了以下標記。

<svg width="500" height="600" class="graph-container"> 
    <g> 
    <rect x="150" y="190" height="50" width="200" rx="30" ry="30" nodeId="1" children="3" style="fill: none; stroke: rgb(68, 68, 68);"></rect> 
    <text x="250" y="220" text-anchor="middle" fill="#444" style="font-size: 24px;">root</text> 

    </g> 

</svg> 

我已經通過d3js在較大的矩形中添加了一個小圓圈。

$(document).ready(function() { 

var node = d3.select('g'); 
var addchild = node.append("circle") 
      .attr("cx",320) 
      .attr("cy",210) 
      .attr("r",10) 
      .attr("class","addchild") 
      .style("fill","none") 
      .style("stroke","#444"); 

      addchild.on("click", function() { 
       alert("on click"); 
      });; 

}); 

但點擊事件未觸發。

這裏是jsfiddle的相同。

Answer 1

默認情況下你只能點擊被實際繪製的形狀的部件。由於您的形狀中填充爲「無」，因此不會響應點擊。中風確實但非常薄，很難點擊。

如果您希望未提取圓的內部響應點擊，您可以將pointer-events屬性更改爲可見，並且圓的內部將響應點擊。

$(document).ready(function() { 
 

 
var node = d3.select('g'); 
 
var addchild = node.append("circle") 
 
\t \t \t .attr("cx",320) 
 
\t \t \t .attr("cy",210) 
 
\t \t \t .attr("r",10) 
 
\t \t \t .attr("class","addchild") 
 
\t \t \t .style("fill","none") 
 
     .style("pointer-events","visible") 
 
\t \t \t .style("stroke","#444"); 
 
\t \t \t 
 
\t \t \t addchild.on("click", function() { 
 
\t \t \t \t alert("on click"); 
 
\t \t \t });; 
 

 
});

<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> 
 
<svg width="500" height="600" class="graph-container"> 
 
    <g> 
 
    <rect x="150" y="190" height="50" width="200" rx="30" ry="30" nodeId="1" children="3" style="fill: none; stroke: rgb(68, 68, 68);"></rect> 
 
    <text x="250" y="220" text-anchor="middle" fill="#444" style="font-size: 24px;">root</text> 
 

 
    </g> 
 

 
</svg>

Answer 2

首先問題不在於點擊事件，它是fill風格。將其設置爲transparent並且您的代碼將起作用。

 .style("fill","transparent") 

小提琴：https://jsfiddle.net/rmmbzk3a/5/

還有一個提示。

當您像這樣創建元素時，您可以綁定click事件。

var addchild = node.append("circle") 
      .attr("cx",320) 
      .attr("cy",210) 
      .attr("r",10) 
      .attr("class","addchild") 
      .style("fill","none") 
      .style("stroke","#444") 
      .on("click", function() { 
       d3.select(this).style('fill', 'red'); //just to make sure 
       alert("on click"); 
      });; 

小提琴：https://jsfiddle.net/rmmbzk3a/2/

Answer 3

您單擊工作只是個夠是沒有的。所以它不工作。

其他使用rgba如.style("fill","rgba(255, 255, 255, 0)")。

$(document).ready(function() { 
 

 
var node = d3.select('g'); 
 
var addchild = node.append("circle") 
 
\t \t \t .attr("cx",320) 
 
\t \t \t .attr("cy",210) 
 
\t \t \t .attr("r",10) 
 
\t \t \t .attr("class","addchild") 
 
\t \t \t .style("fill","rgba(255, 255, 255, 0)") 
 
\t \t \t .style("stroke","#444") 
 
\t \t \t 
 
     addchild.on("click", function() { 
 
       alert("on click"); 
 
      });; 
 
    
 

 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> 
 
<script src="https://d3js.org/d3.v3.min.js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> 
 
<svg width="500" height="600" class="graph-container"> 
 
    <g> 
 
    <rect x="150" y="190" height="50" width="200" rx="30" ry="30" nodeId="1" children="3" style="fill: none; stroke: rgb(68, 68, 68);"></rect> 
 
    <text x="250" y="220" text-anchor="middle" fill="#444" style="font-size: 24px;">root</text> 
 
    
 
    </g> 
 
    
 
</svg>

Working Fiddle