平移/缩放顺序刻度？ [英] Pan/zoom ordinal scale?

问题描述

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

x刻度是一个时间刻度以列为中心的日历天等）和工作美好，但我有决定如何缩放/缩放y尺度的问题，其域是一个任务列表，通常会太多，不适合在图表区域，因此，需要进行平移/缩放。

有没有办法告诉默认的顺序缩放对缩放/平移事件做出反应，或者我应该编写一个自定义缩放吗？如果我需要编写一个自定义缩放，它会更好地基于d3.scale.ordinal（它存储整个任务列表，并只使用可见子集作为其域），或在d3.scale。线性（然后实现类似于范围带的顺序尺度等等）。

或者有一些我缺少的（完全可能，因为它是我的第一个项目使用d3 ）

解决方案

我已经私下与我联系，以解释我是如何做到的。

首先，有问题的应用程序的屏幕截图，谁的工作是聚合和显示从各种来源（PowerPoint文件，公司数据库等）收集的规划数据。

相关位是带有彩色点的右侧垂直轴，其中每个点代表项目的努力和涉及的组织。轴上的灰色区域是一个d3.js画笔，可以平移/调整大小以实时更改图表/表格数据。

  //轴是一个常规的顺序轴，用画笔
 y2 = d3.scale.ordinal（），
 brush = d3.svg.brush（）。y（y2）。 on（'brush'，brushReact），
 // [...] 
 //刷新事件处理程序
 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]）$ ​​b $ b return; 
 tasksSlice = [s0，s1]; 
 inner.refresh（）; 
} 
  

在处理程序内发生的事情很简单：

• 获取画笔范围


• 将其转置到数据数组中的索引


• 我的数据数组，并将结果设置为要显示的数据


• 刷新图表和表格

我希望这会清除它。

I am using d3 to render a simplified gantt chart, with panning and zooming using d3.behavior.zoom.

The x scale is a time scale (slightly modified to center calendar days in columns, etc) and works beatifully, but I'm having problems deciding how to zoom/pan the y scale, whose domain is a list of tasks which will often be too many to fit in the chart area, so the need for panning/zooming.

Is there a way to tell the default ordinal scale to react to zoom/pan events, or should I write a custom scale? And if I need to write a custom scale, would it be better to base it on d3.scale.ordinal (having it store the whole list of tasks, and use only the visible subset as its domain), or on d3.scale.linear (and then implement something similar to the ordinal scale for rangebands etc?).

Or is there something I'm missing (entirely probable as it's my first project using d3)?

解决方案

Expanding slightly from my previous answer as I have been contacted privately to explain how I did this.

First, a screenshot of the app in question, whos emain job is aggregating and displaying planning data gathered from various sources (PowerPoint files, corporate databases, etc.).

The relevant bit is the right vertical axis with the colored dots, where each dot represents a project's effort and involved organization. The gray area on the axis is a d3.js brush, and can be panned/resized to change the chart/table data in real time.

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

What happens inside the handler is pretty simple:

• get the brush extent
• transpose it to indexes in my data array
• slice my data array and set the result as the data to display
• refresh the chart and table

I hope this clears it up.

这篇关于平移/缩放顺序刻度？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！