javascript-获取点鼠标的交互作用和笔刷共同工作
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了javascript-获取点鼠标的交互作用和笔刷共同工作，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含4516字，纯文字阅读大概需要7分钟。
内容图文
我正在尝试让鼠标事件在散点图中的不同元素之间进行协作. D3的brush组件将一些侦听器添加到被调用的元素(例如svg.call(brush)).我还想显示绑定在SVG上的点,非常类似于散点图,并且这些点支持鼠标悬停事件(用于工具提示和其他交互).
previous solution建议在调用画笔之前绘制点,该点支持将鼠标悬停在点上,同时允许绘制画笔和修改范围.但是,如果笔刷的拖动运动从一个点开始(我在非常密集的图形中预料到),则当某个范围已经处于活动状态时,笔刷组件会发生异常(平移笔刷会调整范围的大小).您可以在this example上试用,上面建议的解决方案已在其中实现.
我将问题缩小到d3.svg.brush组件内部的d3的brushstart()函数中如何处理事件.这是画笔正确工作时的相关变量.
this eventTarget dragging resizing
-------------- ------------------------------------- ---------- ----------
Translating extent brush parent rect.extent true 0
Resizing extent brush parent rect (invisible rects for resizing) false e.g. "e"
Redrawing brush parent rect.background false 0
使用上面的解决方案,这是当前的样子：
this eventTarget dragging resizing
-------------------- -------------- ------------- ---------- ----------------
Translating extent brush parent circle false circle.datum()
Resizing extent brush parent circle false circle.datum()
Redrawing brush parent circle false circle.datum()
真正的问题是：如何才能使d3.event.target的源与第一张表匹配？如果我可以做到,那么我可以得到我想要的行为.谢谢你的帮助！
如果您错过了它,那么这里有一个难题正在发挥作用：http://bl.ocks.org/yelper/d38ddf461a0175ebd927946d15140947
解决方法:
这是纠正此行为的快速技巧：
.on('mousedown', function(d){
var e = brush.extent(),
m = d3.mouse(svg.node()), // pointer position with respect to g
p = [x.invert(m[0]), y.invert(m[1])]; // position in user space
if ( brush.empty() || // if there is no brush
(e[0][0] > d[0] || d[0] > e[1][0]
|| e[0][1] > d[1] || d[1] > e[1][1] ) // or our current circle is outside the bounds of the brush
) {
brush.extent([p,p]); // set brush to current position
} else {
d3.select(this).classed('extent', true); // else we are moving the brush, so fool d3 (I got this from looking at source code, it's how d3 determines a drag)
}
});
下面的工作代码,更新了块here.
<!DOCTYPE html>
<meta charset="utf-8">
<style>
.axis path,
.axis line {
fill: none;
stroke: #000;
shape-rendering: crispEdges;
}
.hidden {
opacity: 0.3;
}
.extent {
fill: #000;
fill-opacity: .125;
stroke: #fff;
}
</style>
<body>
<script src="//d3js.org/d3.v3.js"></script>
<script>
var margin = {top: 20, right: 50, bottom: 30, left: 50},
width = 960 - margin.left - margin.right,
height = 350 - margin.top - margin.bottom;
var x = d3.scale.linear()
.range([0, width])
.domain([0, 10]);
var y = d3.scale.linear()
.range([height, 0])
.domain([0, 10]);
var xAxis = d3.svg.axis()
.scale(x)
.orient("bottom");
var yAxis = d3.svg.axis()
.scale(y)
.orient("left");
var curPt = d3.select('body')
.append('p')
.html("Current point: ")
.append('span')
.attr('id', 'curPt');
var svg = d3.select('body').insert('svg', 'p')
.attr('width', width + margin.left + margin.right)
.attr('height', height + margin.top + margin.bottom)
.append('g')
.attr('transform', 'translate(' + margin.left + ',' + margin.top + ')');
svg.append('g')
.attr('class', 'x axis')
.attr('transform', 'translate(0,'+height+')')
.call(xAxis);
svg.append('g')
.attr('class', 'y axis')
.call(yAxis);
var brush = d3.svg.brush()
.x(x)
.y(y)
.on("brush", function() {
var e = brush.extent(),
c = svg.selectAll('circle');
c.classed('extent', false);
c.classed('hidden', function(d) {
return e[0][0] > d[0] || d[0] > e[1][0]
|| e[0][1] > d[1] || d[1] > e[1][1];
}
);
})
.on("brushend", function() {
if (brush.empty()) svg.selectAll('circle').classed('hidden', false);
});
svg.call(brush);
var data = d3.range(50).map(function() { return [Math.random() * 10, Math.random() * 10]; });
svg.append('g')
.attr('class', 'points')
.selectAll('circle')
.data(data).enter()
.append('circle')
.attr('cx', function(d) { return x(d[0]); })
.attr('cy', function(d) { return y(d[1]); })
.attr('r', 10)
.style('fill', 'steelblue')
.on('mouseover', function(d) {
curPt.html("[" + d[0] + ", " + d[1] + "]");
})
.on('mouseout', function(d) {
curPt.html("");
})
.on('mousedown', function(d){
var e = brush.extent(),
m = d3.mouse(svg.node()),
p = [x.invert(m[0]), y.invert(m[1])];
if ( brush.empty() ||
(e[0][0] > d[0] || d[0] > e[1][0]
|| e[0][1] > d[1] || d[1] > e[1][1] )
) {
brush.extent([p,p]);
} else {
d3.select(this).classed('extent', true);
}
});
</script>内容总结
以上是互联网集市为您收集整理的javascript-获取点鼠标的交互作用和笔刷共同工作全部内容，希望文章能够帮你解决javascript-获取点鼠标的交互作用和笔刷共同工作所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。