Jquery d3循环onclick事件未触发

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

但是click事件没有触发

---

这是相同的问题。

首先，问题不在于单击事件，而在于

填充

样式。将其设置为

transparent

，代码将正常工作

        .style("fill","transparent")

小提琴：

还有一个提示。

创建如下元素时，可以绑定

单击
事件

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

小提琴：
您单击“工作”，但您的填充是空的。所以它不起作用了

否则使用rgba，如
.style（“填充”，“rgba（255，255，255，0）”）


$（文档）.ready（函数（）{
var节点=d3。选择（'g'）；
var addchild=node.append（“圆”）
.attr（“cx”，320）
.attr（“cy”，210）
.attr（“r”，10）
.attr（“类”、“添加子项”）
.style（“填充”、“rgba（255、255、255、0）”）
.style（“笔划”，“#444”）
addchild.on（“单击”，函数（）{
警报（“点击”）；
});; 
});

根
默认情况下，您只能单击实际绘制的形状部分。由于填充在形状中为“无”，因此不会对单击作出响应。笔划确实如此，但它很薄，很难点击

如果希望未绘制圆的内部响应单击，可以将属性更改为“可见”，然后圆的内部将响应单击


$（文档）.ready（函数（）{
var节点=d3。选择（'g'）；
var addchild=node.append（“圆”）
.attr（“cx”，320）
.attr（“cy”，210）
.attr（“r”，10）
.attr（“类”、“添加子项”）
.style（“填充”、“无”）
.style（“指针事件”、“可见”）
.风格（“笔划”，“#444”）；
addchild.on（“单击”，函数（）{
警报（“点击”）；
});; 
});

根
或者，我也可以选择用某种颜色填充圆圈。谢谢你提供的信息。从不知道
fill:none
是不可点击的。@SoorajChandran您当然可以，但如果您只想对点击事件做出响应，则会改变绘制的内容，并且效率会降低。非常感谢。这修复了我遇到的一个问题，“单击”事件抛出一个错误，我无法找出原因，并且它开始在其他部分出现故障。向元素添加
.style（“指针事件”，“可见”）
确实修复了它：）
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");
            });;