标签：console brush extent 刷子 提示框 交互 d3 友好

1. 提示框

基本原理：

用一个dom元素来显示提示框，提示框绝对定位，在相关事件中，动态修改提示框的位置即可。

通常是用 event 的 pageX 和 pageY 修改 提示框定位。

2. 折线图的焦点虚线

在鼠标滑动到折线图焦点时候，通常要显示到Y轴和X轴的虚线。

此时，需要监听划过区域的事件，在折线(太细，热区小)，坐标轴(不能监听)，上监听事件都不行。

需要在坐标轴内侧区域，添加一个大的矩形，覆盖住折现，在透明的矩形上，监听鼠标事件。

3. 区域选择

鼠标按住左键，拖曳，松开左键，会形成一个矩形区域，是一个选择区。

d3里面用刷子这个概念，来描述这种行为，简化了处理过程。

d3.svg.brush() 创建刷子对象
brush(selection) 刷子绑定到选择集
brush.x() 设定或获取x轴比例尺
brush.y() 设定或获取y轴比例尺
brush.extent() 设定或获取刷子的范围
brush.clear() 清空刷子的范围
brush.empty() 判断刷子的范围是否为空
brush.on() 设置刷子的监听器，有 brushstart, brush, brushend 三个事件

在svg画板中选择一块区域

var brush = d3.svg.brush()
              .x(xScale)
              .y(yScale)
              .extent([0,0],[100,100])
              .on('brush', brushed)

function brushed(){
    var extent = brush.extent();
    console.log('x方向的下限：' + extent[0][0]);
    console.log('x方向的上限：' + extent[1][0]);
    console.log('y方向的下限：' + extent[0][1]);
    console.log('y方向的上限：' + extent[1][1]);
}

svg.append('g')
   .call(brush)
   .selectAll('rect')
   .style('fill-opacity',0.3)

标签：console,brush,extent,刷子,提示框,交互,d3,友好
来源： https://www.cnblogs.com/mengff/p/12992643.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。