Skip to content

Instantly share code, notes, and snippets.

@xunhanliu

xunhanliu/Rect_brush

Last active June 8, 2019 05:31
Show Gist options
  • Save xunhanliu/6f0b46789842e9e19e6cfe9bd0b16806 to your computer and use it in GitHub Desktop.
Save xunhanliu/6f0b46789842e9e19e6cfe9bd0b16806 to your computer and use it in GitHub Desktop.
Download ZIP
Rect_brush
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>rect brush</title>
<link href="//www.xunhanliu.top/static/css/font-awesome.css" rel="stylesheet" type="text/css"/>
<link href="//www.xunhanliu.top/static/css/toastr.css" rel="stylesheet" type="text/css"/>
<link href="//www.xunhanliu.top/static/css/myToast.css" rel="stylesheet" type="text/css"/>
<style>
circle.selected {
stroke: red !important;
}
</style>
<script src="//www.xunhanliu.top/static/js/jquery.js"></script>
<script src="//www.xunhanliu.top/static/js/d3/d3.v4.js"></script>
<script src="//www.xunhanliu.top/static/js/d3/d3v4-brush-lite.js"></script>
<script src="//www.xunhanliu.top/static/js/toastr.min.js"></script>
<script src="//www.xunhanliu.top/static/js/myToastr.js"></script>
<script src="//www.xunhanliu.top/static/js/circleBrush.js"></script>
</head>
<body>
<svg id="mleft" tabindex="0" style="height: 600px;width: 600px;"></svg>
<script>
var margin = {topBottom: 20, leftRight: 20}
var width = $('#mleft').width() - margin.leftRight * 2;
var height = $('#mleft').height() - margin.topBottom * 2;
var draw = d3.select('#mleft').append('g').attr('transform', 'translate(' + margin.leftRight + ',' + margin.topBottom + ')');
var mybrush=new circleBrush("#mleft",draw.node(),'circle'); //在这里创建刷选组件
function brushItem(d) { //需要记录哪些属性 通过mybrush.getBrushSel(brushItem) 可以查看刷选了哪些点
return d.x;
}
//随机生成20个点
var points = [];
for (var i = 0; i < 20; i++) {
var x = Math.random() * width;
var y = Math.random() * height;
var r = Math.random() * 10 + 10;
var text = i;
points.push({x: x, y: y, r: r, text: text});
}
var circle_group = draw.selectAll('.circle_group').data(points).enter().append('g').attr('class','circle_group brushNode').attr('transform',
function (d) {
return 'translate(' + d.x + ',' + d.y + ')';
});
circle_group.append('circle')
.attr('r', function (d) {
return d.r;
})
.style("fill", function (node,i) {
var r = Math.floor(Math.random() * 255);
var g = Math.floor(Math.random() * 255);
var b = Math.floor(Math.random() * 255);
return 'rgba(' + r + ',' + g + ',' + b + ',0.7)';
})
.on("contextmenu", function (node) { //用于提示选择
showToast('success', "sel:"+mybrush.getBrushSel(brushItem));
})
;
circle_group.append('text').text(d => d.text).attr("y", 0).attr("x", -8);
//屏蔽默认右键菜单
document.oncontextmenu = function(event) {
if (window.event) {
event = window.event;
}
try {
var the = event.srcElement;
if (!((the.tagName == "INPUT" && the.type.toLowerCase() == "text") || the.tagName == "TEXTAREA")) {
return false;
}
return true;
} catch (e) {
return false;
}
}
</script>
</body>
</html>
Raw
Rect_brush
这是一个d3的brush组件。
内部主要是circleBrush.js，通过js类的应用，能同时创建多个不相互冲突的brush组件.
由于刷选需要监听keydown和keyup(shift按键)，需要加tabindex属性，让块元素获得焦点（keydown和keyup事件才能响应）。
操作：按住shift键，使用鼠标进行刷选。然后对点进行右键选择，会提示选择了哪些点（这部分是个回调，需要注明把点的哪个数据返回）。
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment