文本阻塞圆点击方法 d3js

Question

首先，我相信有比我尝试的方法更简单的方法来实现这一点。我正在尝试使用d3js放大特定的圆，并在圆上覆盖文本。问题在于，由于文本位于圆的上方，因此文本会阻挡点击圆时触发的onclick事件。以下是我目前的代码：

js

var svg = d3.select("svg")
    .attr("width", width)
    .attr("height", height)
    .append("g");
var node1 = svg.append("g")
    .append("circle")
     .data([offset[0]])
     .text(function(d){return d.label})
     .attr("r", 25)
     .style("fill","white") 
     .on("click", clicked);
     node1.attr("cx", 530)
     .attr("cy", 310)
     .transition()
     .delay(500)
     .duration(1000)
     .attr("r", 55)
     .attr("cx", 530)
     .attr("cy", 205);

     d3.select('g').append('text')
     .attr("id","orient")
     .attr("dx", 510)
     .attr("dy", 210)
     .attr("width", 90)
     .attr("height", 90)
     .text(function(d){return offset[0].label});
var node2 = svg.append("g")
        .append("circle")
         .data([offset[1]])
         .attr("r", 25)
         .style("fill","white")  
         .on("click", clicked);
         node2.attr("cx", 530)
         .attr("cy", 310)
         .transition()
         .delay(500)
         .duration(1000)
         .attr("r", 55)
         .attr("cx", 620)
         .attr("cy", 310);

         d3.select('g').append('text')
         .attr("id","seperate")
         .attr("dx", 590)
         .attr("dy", 315)
         .attr("width", 90)
         .attr("height", 90)
         .text(function(d){return offset[1].label});

函数

 function clicked(d) {
 var imageSelected = this;
  console.log("clicked");
  var cx, cy, k, offset;
  var setClass = d.swipe_class;
    cx = d3.select(this).attr("cx");
    cy = d3.select(this).attr("cy");
    k = 2;
    cx= cx - d.xoff; 
    cy= cy - d.yoff;
    console.log("cy="+d.yoff +"cx="+ d.xoff);


  svg.transition()
      .duration(750)
      .attr("transform", "translate(" + width/2 + "," + height/2 + ")scale(" + k + ")translate(" + -cx + "," + -cy + ")");
}

当我点击圆形上方的文本时，有没有一种方法可以触发圆形的点击事件？或者可能有更好的方法可以实现这个功能吗？

- Joe Komputer

Answer 1

您可以设置文本忽略指针事件：

...
.append("text")
.attr("pointer-events", "none")
...

- Lars Kotthoff

---

来自未来三年的感谢。 - Matt

жЏђз¤єд»–дєєпјљйЂљиї‡CSS执行pointer-events: noneдёЌиµ·дЅњз”ЁпјЊеї…йЎ»йЂљиї‡d3зљ„attr()方法来实现。 - V. Rubinetti