平移/缩放有序的规模?(Pan/zoom ordinal scale?)

2019-08-02 15:17发布

我使用D3呈现一个简化的甘特图,以平移和使用d3.behavior.zoom缩放。

X比例是一个时间尺度(略作修改,以在列,等中心日历天)和作品beatifully,但我有决定如何缩放/ Y比例,其域的问题是经常是任务列表太多适合在图表区域,所以需要平移/缩放。

有没有办法告诉默认顺序量表反应放大/声像事件,或者我应该写一个自定义的规模有多大? 如果我需要写一个自定义的规模,会是更好地将它基于d3.scale.ordinal(有它存储任务的整个列表,并只使用可见光子集作为其领域),或在d3.scale。线性(然后实现类似于rangebands等顺序量表的东西吗?)。

或者是有什么我失踪(完全可能的,因为它是使用D3我的第一个项目)?

Answer 1:

因为我一直在私下接触来解释我是如何做到这从我以前的答案稍有扩大。

首先,相关应用程序的截图,卫生组织emain作业汇总和显示来自各种来源(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();
}

会发生什么事的处理程序中是非常简单的:

  • 拿到刷程度
  • 它移植到索引中我的数据阵列
  • 切开我的数据阵列,并设置其结果作为要显示的数据
  • 刷新图表和表格

我希望这将清除它。



Answer 2:

原来,这并不难,我必须:

  • 写自定义比例,大多相同d3.scale.ordinal,不同之处在于它存储全范围域值和实现该设置可见域值的范围内的切片([最小值,最大值])方法
  • 跟踪缩放事件回调的Y平移三角洲,并把它添加到存储总Y平移变量
  • 检查,如果总平移量是> =多于两个范围值之间在y增量,如果检查,我们不是已经在(可见或不可见的)域边界的一个(0或长度),如果我们不会递增或减1片索引,复位总翻译变量,然后重新绘制轴


文章来源: Pan/zoom ordinal scale?