Javascript d3鼠标事件不工作
我在mousedown、mouseup和mousemove上触发d3事件时遇到问题。当我将代码移动到生产服务器时,代码无法工作,否则它可以与简单的index.html和jquery以及d3库一起工作。在production文件夹中,还有其他用于可拖动元素的库,这些库与svg和d3实现没有任何关系,我在这里尝试完成这些。我只是在想,它们可能是与鼠标事件发生冲突的原因:任何帮助都将不胜感激 下面是我在生产环境之外运行良好的代码:我试图在鼠标移动时划一条线:Javascript d3鼠标事件不工作,javascript,jquery,d3.js,svg,Javascript,Jquery,D3.js,Svg,我在mousedown、mouseup和mousemove上触发d3事件时遇到问题。当我将代码移动到生产服务器时,代码无法工作,否则它可以与简单的index.html和jquery以及d3库一起工作。在production文件夹中,还有其他用于可拖动元素的库,这些库与svg和d3实现没有任何关系,我在这里尝试完成这些。我只是在想,它们可能是与鼠标事件发生冲突的原因:任何帮助都将不胜感激 下面是我在生产环境之外运行良好的代码:我试图在鼠标移动时划一条线: var container =
var container = d3.select('svg');
function draw(selection){
var xy0,
path,
keep = false,
line = d3.svg.line()
.x(function(d){ return d[0]; })
.y(function(d){ return d[1]; });
selection
.on('mousedown', function(){
console.log("100")
console.log('THIS', this)
keep = true;
xy0 = d3.mouse(this);
console.log('xy0', xy0)
path = d3.select('svg')
.append('path')
.attr('d', line([xy0, xy0]))
.style({'stroke': 'red', 'stroke-width': '3px'});
console.log(path)
})
.on('mouseup', function(){
var xUp = d3.mouse(this);
console.log('xUp', xUp)
keep = false;
})
.on('mousemove', function(){
if (keep) {
Line = line([xy0, d3.mouse(this)
.map(function(x){ return x - 1; })]);
console.log(Line);
path.attr('d', Line);
}
var xMove = d3.mouse(this);
console.log('x', xMove[0]);
console.log('y', xMove[1]);
console.log('xMove', xMove)
});
}
d3.select('svg').call(draw);
这是HTML
决心。在同一视图中有一个可拖动的组件,当移除该组件时,上述问题就消失了。这让我想到,d3和jQuery的鼠标事件之间可能会发生冲突。请发布一个完整的示例来说明问题,好吗?
<image xlink:href="dot.svg" x="7%" y="35%" height="20px" width="20px"></image>
<image xlink:href="dot.svg" x="36%" y="35%" height="20px" width="20px"></image>
<image xlink:href="dot.svg" x="65%" y="35%" height="20px" width="20px"></image>
<image xlink:href="dot.svg" x="7%" y="70%" height="20px" width="20px"></image>
<image xlink:href="dot.svg" x="36%" y="70%" height="20px" width="20px"></image>
<image xlink:href="dot.svg" x="65%" y="70%" height="20px" width="20px"></image>
</svg>