我正在使用 d3 渲染简化的甘特图,并使用 d3.behavior.zoom 进行平移和缩放。
x 刻度是一个时间刻度(稍微修改为列中的中心日历日等)并且工作得很好,但是我在决定如何缩放/平移 y 刻度时遇到问题,其域是通常会出现的任务列表图表区域太多,无法容纳,因此需要平移/缩放。
有没有办法告诉默认序数比例对缩放/平移事件做出反应,或者我应该编写自定义比例?如果我需要编写自定义比例,最好将其基于 d3.scale.ordinal (让它存储整个任务列表,并仅使用可见子集作为其域),或者基于 d3.scale。线性(然后实现类似于范围带等的序数比例的东西?)。
或者我遗漏了什么(很可能是因为这是我使用 d3 的第一个项目)?
由于有人私下联系我解释我是如何做到这一点的,因此对我之前的答案略有扩展。
首先是相关应用程序的屏幕截图,其主要工作是聚合和显示从各种来源(PowerPoint 文件、公司数据库等)收集的规划数据。
相关位是带有彩色点的右侧垂直轴,其中每个点代表项目的工作量和涉及的组织。轴上的灰色区域是 d3.js 画笔,可以平移/调整大小以实时更改图表/表格数据。
// the axis is a regular ordinal axis, with a brush
y2 = d3.scale.ordinal(),
brush = d3.svg.brush().y(y2).on('brush', brushReact),
// [...]
// brush event handler
function brushReact() {
if (tasksSlice == null)
return;
var yrb = y2.rangeBand(),
extent = brush.extent(),
s0 = Math.round(extent[0]/yrb),
s1 = Math.round(extent[1]/yrb);
if (s0 == tasksSlice[0] && s1 == tasksSlice[1])
return;
tasksSlice = [s0, s1];
inner.refresh();
}
处理程序内部发生的事情非常简单:
- 获取画笔范围
- 将其转置为我的数据数组中的索引
- 对我的数据数组进行切片并将结果设置为要显示的数据
- 刷新图表和表格
我希望这能解决问题。
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)