当前位置: 首页 > 文档资料 > D3.js 帮助文档 >

d3-dispatch

优质
小牛编辑
113浏览
2023-12-01

Dispatching(分发)是一个用来降低代码耦合度的便捷方式: 注册回调函数然后使用任意参数调用.很多D3组件比如d3-request,通过这种机制触发事件监听器。与 Nodejs 的 EventEmitter 类似,只不过每个监听器都有确定的名字以方便移除或替换。

例如为 startend 事件创建分发:

var dispatch = d3.dispatch("start", "end");

然后使用 dispatch.on 注册回调函数:

dispatch.on("start", callback1);
dispatch.on("start.foo", callback2);
dispatch.on("end", callback3);

然后可以通过 dispatch.call 或者 dispatch.apply 来调用所有的 start 回调:

dispatch.call("start");

function.call 类似,你也可以指定 this 环境和任意参数:

dispatch.call("start", {about: "I am a context object"}, "I am an argument");

更多分发的例子参考 d3-dispatch for coordinated views.

Installing

NPM 安装: npm install d3-dispatch. 或者下载 latest release. 也可以直接从 d3js.orgstandalone library 或作为 D3 4.0 的一部分直接引入. 支持 AMD, CommonJS 和基本的标签引入形式,如果使用标签引入会暴露全局 d3 变量:

<script src="https://d3js.org/d3-dispatch.v1.min.js"></script>
<script>

var dispatch = d3.dispatch("start", "end");

</script>

在浏览器中测试 d3-dispatch

API Reference

d3.dispatch(types…) <>

为指定的事件 types 创建一个新的分发器。每个 type 都是一个字符串,比如 "start""end".

dispatch.on(typenames[, callback]) <>

添加、移除或者获取指定 typenamescallback。如果指定了 callback 则将其注册为对应的 typenames 的回调,如果对应的 typenames 已经有回调则将其替换。

typenames 是一个字符串,包含(.)分开的 typenames ,其中 names 可选。比如 start or end.foo 这种形式。也就是说同一种 type 可以指定多个不同 name 的回调,比如 start.foostart.bar,在同时指定多个 typenames 时可以使用空格隔开: start end or start.foo start.bar.

移除所有 namefoo 的回调,使用dispatch.on(".foo", null).

如果没有指定 callback 则返回当前 typenames 对应的回调(如果有的话)。如果有多个符合条件的则返回第一个匹配的回调。

dispatch.copy() <>

返回当前分发对象的副本。修改原分发对象不会影响副本,反之亦然。

dispatch.call(type[, that[, arguments…]]) <>

function.call 类似, 调用对应 type 的每个回调,that 参数表示回调的 this 上下文并传递指定的 arguments,参考 dispatch.apply。

dispatch.apply(type[, that[, arguments]]) <>

function.apply 类似, 调用 type 的每个回调,that 参数表示回调的 this 上下文并传递指定的 arguments,例如,如果你想在原始的点击事件后分发一个自定义回调,并给回调传递 this 上下文和指定的参数,可以:

selection.on("click", function() {
  dispatch.apply("custom", this, arguments);
});

你可以传递任何想传递的参数,更一般的情况下,你可能会创建一个对象表示当前事件,或者传递当前的数据 (d) 和引 (i);参考function.callfunction.apply 获取更多信息。

最后更新:

类似资料

  • Dispatching(分发)是一个用来降低代码耦合度的便捷方式: 注册回调函数然后使用任意参数调用.很多D3组件比如d3-request,通过这种机制触发事件监听器。与 Nodejs 的 EventEmitter 类似,只不过每个监听器都有确定的名字以方便移除或替换。 例如为 start 和 end 事件创建分发: var dispatch = d3.dispatch("start", "end

  • 视图移动以及缩放是一种将用户注意力聚焦在感兴趣区域的一种流行的交互技术。操作直接,容易理解: 点击并拖拽平移,使用滚轮进行缩放,当然也可以通过触摸进行。平移和缩放被广泛的应用在地图中,但是也可被应用到其他的可视化比如时间序列以及散点图中。 缩放行为通过 d3-zoom 模块实现,能方便且灵活到 selections 上。它处理了许多 Installing NPM 安装: npm install d

  • 这个模块实现了用来计算一组二维点 Voronoi diagram(泰森多边形) 或 Delaunay triangulation(德劳内三角剖分) 的 Steven J. Fortune’s algorithm 算法。这个模块的实现大多是基于 Raymond Hill 的工作。 泰森多边形不仅仅在视觉上具有吸引力,在交互方面也非常实用,比如在散点图中增加点的目标面积。参考 “Strikeouts

  • transition 是一个类 selection 的接口,用来对 DOM 进行动画修改。这种修改不是立即修改,而是在规定的事件内平滑过渡到目标状态。 应用过渡,首先要选中元素,然后调用 selection.transition,并且设置期望的改变,例如: d3.select("body") .transition() .style("background-color", "red")

  • 这个模块提供了一个高效的队列,能管理上千并发动画同时保证与并发或分段动画一致的同步时序。在内部使用 requestAnimationFrame 进行 fluid animation(如果支持的话),否则切换使用 setTimeout来实现。 Installing NPM 安装: npm install d3-timer. 此外还可以下载 latest release。也可以直接从 d3js.org

  • 在可视化时间序列数据、分析时间模式或处理一般时间时,常规时间单位的不规则性很快就变得明显起来。在 Gregorian calendar(公历) 中,大多数月份有 31 天但是有些月份只有 28 或者 29、30 天。大多数年份有 365 天但是 leap years(闰年) 有 366 天。在 daylight saving(夏令时) 中一天可能有 23 25 小时。更复杂的是世界各地的夏时制不同