Question

我正在尝试使用d3.js v5在现有的javascript中实现缩放。

在我使用变焦之前

svg.on('mouseup', function(){ 
  if(d3.event.target.hasAttribute('is-handle'){
    //do something
  }
});

检查目标是否具有特定属性。

这很好用，例如：https://jsfiddle.net/wLxuto54/

我希望能够在缩放没有变化的情况下处理“ mouseUp”。通过检查鼠标是否在“ zoomstart”和“ zoomend”之间移动来完成此操作。

但是当实现缩放时，控制台显示错误

Uncaught TypeError: d3.event.target.hasAttribute is not a function

完整的示例代码：

const width = 800,
      height = 500;

var svg = d3.select("svg")
            .attr('height', height)
            .attr('width', width)
            .call(d3.zoom()
                 .scaleExtent([1 / 2, 4])
                 .on("start", zoomstart)
                 .on("end", zoomend)
                 .on("zoom", zoomed));

var g = svg.append("g");

var mousePos = null;

function zoomstart(){
  mousePos = d3.mouse(this);
}

function zoomend(){
  var m = d3.mouse(this);
  if (mousePos[0] ===  m[0] && mousePos[1] === m[1]){
    mouseUp();
  }
}       

function zoomed() {
  g.attr("transform", d3.event.transform);
}

function mouseUp(){
   if(d3.event.target.hasAttribute('is-handle')){
    console.log("IS HANDLE");
   }else{
  g.append('circle')
       .attr('cx', d3.mouse(this)[0])
       .attr('cy', d3.mouse(this)[1])
       .attr('r', 5)
       .attr('fill', 'yellow')
       .attr('stroke', '#000')
       .attr('is-handle', 'true')
       .style({cursor: 'pointer'});
   }
}

或者在jsfiddle中：https://jsfiddle.net/3f214eyt/

如何在仍能与“ mouseUp”事件中的目标对象交互的同时解决此问题？

如何与缩放事件一起与d3.js v5中的元素进行交互

0 个答案: