d3.js - 平移/缩放顺序比例？

Question

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

x 比例是一个时间比例(稍微修改为以列为中心的日历天等)并且工作得很好，但是我在决定如何缩放/平移 y 比例时遇到问题，其域是任务列表，通常是图表区域太多，因此需要平移/缩放。

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

还是我遗漏了什么(完全有可能，因为这是我使用 d3 的第一个项目)？

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();
}

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

获取画笔范围

将其转置为我的数据数组中的索引

切片我的数据数组并将结果设置为要显示的数据

刷新图表和表格

我希望这可以解决问题。