Question

我无法让点击在圈子上工作。我已经阅读了有关如何将点击等附加到圈子的各种提示，但我无法让它们工作，所以我不能理解它们。

任何提示都将不胜感激。

d3.json("d3_files/json/points-category-xyz.json",function(error,data){
  svg.select("#points")
 .selectAll("circle")
 .data(data)
 .enter()
 .append("circle")
 .attr("r",10)
 .style("fill-opacity",.7)
 .style("display",function(data){
    return"block";
  }) // end display style
 .style("fill",function (data) {
    if (data.category=="abc") {
      return "blue"
    } // endif
    else {
      return "red"
    } // endelse
  }) // end style fill
 .style("stroke","#fff")
 .on("click", function (){ // this doesn't appear to work
   console.log("Hmmm");
   alert("Hello");
  }) // end click
 .attr("transform",function(data){
    return"translate("+projection([data.lng,data.lat])+")"
  }) // end transform attr

.on("mouseout",function(d){
 d3.select("body")
  .select(".datamaps-hoverover")
  .style("display","none");  
 d3.select(this)
  .style("stroke-width","1px")
  }) // end mouseout
 .on("mouseover",function(d){
 d3.select(this)
   .style("stroke-width","4px")
   .html(function() {
       return node.attributes.name.value + "Popup here"
    }) // end .html
}) // end mouseover
.on("mousemove",function(data){
 var data=d3.mouse(this);
var n=this;
d3.select(this)
  .style("stroke-width","4px")
  d3.select("body") 
    .select(".datamaps-hoverover")
    .style("display","block")
    .style("top",data[1]+10+"px")
    .html(function() {
       return node.attributes.name.value + "Popup here"
     }) // end html
     .style("left",data[0]+"px")
}) // end mouseover
}); // end points json

Answer 1

问题是您的圈子被其他元素遮挡，从不接收指针事件。解决这个问题的一个解决方案是最后添加圆圈。

Answer 2

这对我有用。

link.on("click", function(d){
   $scope.$apply(function() {
      $scope.show(d);
   });
   d3.event.stopPropagation();
});

on（“click”）不使用d3圈

2 个答案: