d3友好的交互

Posted 2020-12-23 mengff

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)