8

我正在使用 d3 渲染简化的甘特图，并使用 d3.behavior.zoom 进行平移和缩放。

x 刻度是一个时间刻度（稍微修改为在列中居中日历天等）并且工作得很好，但是我在决定如何缩放/平移 y 刻度时遇到问题，它的域是一个任务列表，通常是太多无法放入图表区域，因此需要平移/缩放。

有没有办法告诉默认序数比例以对缩放/平移事件做出反应，或者我应该编写自定义比例？如果我需要编写自定义比例，最好将它基于 d3.scale.ordinal（让它存储整个任务列表，并仅使用可见子集作为其域），还是基于 d3.scale。线性的（然后实现类似于范围带等的序数比例？）。

还是我遗漏了什么（很可能，因为这是我第一个使用 d3 的项目）？

4

2 回答 2

3

由于我已私下联系以解释我是如何做到的，因此与我之前的回答略有扩展。

首先，有问题的应用程序的屏幕截图，其主要工作是汇总和显示从各种来源（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();
}

处理程序内部发生的事情非常简单：

  • 获取画笔范围
  • 将其转置为我的数据数组中的索引
  • 切片我的数据数组并将结果设置为要显示的数据
  • 刷新图表和表格

我希望这能解决问题。

于 2014-10-07T12:59:24.910 回答
2

事实证明这并不难，我不得不：

  • 编写一个自定义比例，与 d3.scale.ordinal 基本相同，不同之处在于它存储了域值的全范围并实现了一个设置可见域值范围的 slice([min, max]) 方法
  • 在缩放事件回调中跟踪 y 平移增量，并将其添加到存储总 y 平移的变量中
  • 检查总翻译量是否 >= 大于两个范围值之间的 y 增量，是否检查我们是否已经在（可见或不可见）域边界之一（0 或长度）上，如果我们在不将切片索引递增或递减 1，重置总平移变量，然后重绘轴
于 2012-11-12T22:35:54.540 回答