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

当我单击它上面的文本时，有没有办法触发圆圈点击事件？或者也许只是一种更好的方法来做到这一点？

Answer 1

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

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

文本阻止圈点击方法d3js

1 个答案: