平移/缩放序数比例尺？

Question

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

x比例尺是时间比例尺（稍作修改以在列中居中日历天等），运行得非常好，但我遇到了难以决定如何缩放/平移y比例尺的问题。y比例尺的定义域是任务列表，通常太多无法适应图表区域，因此需要平移/缩放。

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

或者我漏掉了什么（完全可能，因为这是我使用d3的第一个项目）？

- ludoo

Answer 1

稍微扩展一下我之前的回答，因为我已经私下被联系要解释我是如何做到这一点的。

首先，这是一个应用程序的截图，其主要工作是从各种来源（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();
}

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

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

希望这能让您清楚明白。

- ludoo

Answer 2

原来这并不难，我需要：

• 编写一个自定义比例尺，与d3.scale.ordinal大致相同，但它存储完整的域值范围，并实现了slice([min, max])方法以设置可见域值的范围
• 在缩放事件回调中跟踪y轴平移增量，并将其添加到存储总y轴平移的变量中
• 检查总平移量是否大于等于两个范围值之间的y轴增量，如果是，则检查我们是否已经在一个（可见或不可见）域边界上（0或长度），如果没有，则将切片索引增加或减少1，重置总平移变量，然后重新绘制轴。

- ludoo

---

你需要做的是使用画刷控件。MB的bl.ocks.org网站上有一些示例，比如这个http://bl.ocks.org/mbostock/1667367。编辑窗口很愚蠢，只要我按下回车键就会提交评论...无论如何，只需注册您的画刷处理程序函数，并在其中检查画刷范围值，它们将告诉您在主图表中显示什么。 - ludoo