第十章 D3刷子 d3-brush

d3-brush

它也可以被用来放大选中的区域,或选择交叉过滤数据 或实时直方图:

d3.brush()创建一个二维的brush.

d3.brushX()创建一个一维的 x-方向的brush.

d3.brushY()创建一个一维的 y-方向的brush.

svg.append("g")
    .attr("class", "brush")
    .call(d3.brush().on("brush", brushed));

brush.move(group, selection)

为指定的group设置选中范围,
election为一个数值类型的数组. 对于. 对于二维 brush,必须由 [[x0, y0], [x1, y1]]定义, x0y0 表示最小x和y值, x1y1 表示最大x和y值. 对于 x-brush, 一定由 [x0, x1]定义; 对于y-brush, 一定定义为 [y0, y1]. selection也可以是一个返回数组类型的方法. 如果是一个方法则会为每个选中的元素调用,并传递当前的数据 d和索引i,this表示当前的DOM元素节点.

brush.extent([extent])

如果 extent 指定,则设置可刷取的范围

brush.on(typenames, [listener])

  • start - 开始brush操作,比如鼠标按下.
  • brush -当拖动brush区域进行选取时,比如鼠标拖动.
  • end - 在选取结束时,比如鼠标抬起.

d3.brushSelection(node)

返回指定节点的brush选择,在内部元素的brush或以 element.__brush形式存储; 但是你应该使用d3.brushSelection而不是通过直接访问内部存储来调用,如果给定的node没有附加brush操作,则返回null.
selection 被定义为一个数值数组.

  • 对于二维 brush, 它是[[x0, y0], [x1, y1]]这种形式, x0y0 表示最小x和y值, x1y1 表示最大x和y值,
  • 对于[x-brush], 表示为[x0, x1];
  • 对于 [y-brush], 表示为[y0, y1].
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • C语言的学习要从基础开始,这里是100个经典的算法-1C语言的学习要从基础开始,这里是100个经典的 算法 题目:...
    Poison_19ce阅读 1,287评论 0 0
  • 来源: http://www.douban.com/group/topic/14820131/ 调整变量格式: f...
    MC1229阅读 7,105评论 0 5
  • (转自http://www.douban.com/group/topic/14820131/,转自人大论坛) 调整...
    f382b3d9bdb3阅读 10,942评论 0 8
  • MCMC和Gibbs Sampling 1.随机模拟 随机模拟又名蒙特卡罗方法,蒙特卡罗方法的源头就是当年用...
    wlj1107阅读 6,489评论 3 6
  • 1 每天上下班,随着地铁口涌出的匆匆人流,我似一叶浮萍,虽无浮萍孱弱,但也只得随波逐流,若想停顿片刻,则会被如我般...
    杨芃麦阅读 465评论 0 3

友情链接更多精彩内容