Question

我从svg开始，我创建了以下标记。

ShellExecuteEx

我通过d3js在较大的矩形中添加了一个小圆圈。

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

但点击事件未触发。

以下是How to execute child console programs without showing the console window from the Win32 GUI program?的相同内容。

Answer 1

默认情况下，您只能单击实际绘制的形状部分。由于填充是＆＃34;没有＆＃34;在你的形状，它不会对点击做出反应。中风确实如此，但非常轻薄且难以点击。

如果您希望未绘制的圈子内部响应点击次数，您可以将pointer-events属性更改为可见，然后圈子的内部将响应点击次数。

＆＃13;

$( 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("pointer-events","visible")
			.style("stroke","#444");
			
			addchild.on("click", function() {
				alert("on click");
			});; 

});

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

＆＃13;

Answer 2

首先问题不在于click事件，而是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

你点击工作，但你的填充是没有。所以它不起作用。

否则请使用类似.style("fill","rgba(255, 255, 255, 0)")的rgba。

$( 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","rgba(255, 255, 255, 0)")
			.style("stroke","#444")
			 
       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

d3圈onclick事件未触发

3 个答案: