d3.js - 为什么 d3 在缩放期间重新缩放所有比例？

Question

问题是我的 yScale 在平移时发生了变化。

这里是尺度的定义:

this.yScale = d3.scale.linear()
    .domain([0, this.maxY * this.yHeader])
    .rangeRound([0, height * this.yHeightScalor]);

由于我的重绘功能，我需要保持比例(即使用 this.yScale 而不仅仅是 var yScale)。诀窍是，平移 = 缩放，其中 d3.event.scale === 1 和缩放重新缩放域，如您在 D3 的 zoom.js 中放置断点时所见。 rescale 函数。

我可以通过确保在使用时正确定义我的 yScale 来解决这个问题，但在我看来有些地方不对劲。

更新:我包含了代码并删除了导致问题的行。说实话，我只需要 xScale 来缩放用户反馈。无论如何，我在缩放后重绘所有内容(在 zoomEndFunction 中)。

zoom = d3.behavior.zoom()
    .x(this.xScale)
    .y(this.yScale) // <--------------------- I removed this
    .scaleExtent([0.5, 2])
    .on("zoom", zoomFunction(this))
    .on("zoomend", zoomEndFunction(this));

svg = histogramContainer.append("svg")
    .attr('class', 'chart')
    .attr('width', width)
    .attr('height', height)
    .call(zoom)
    .append('g')
    .attr('transform', 'translate(' + this.margin.left  + ' , ' +
            (height - this.margin.bottom) + ')');

// everything else is in the svg

Answer 1

d3 zoom behaviour主要充当处理多个事件(鼠标滚轮、拖动和各种触摸手势)的包装器，并将它们转换为平移和缩放值，这些值作为 d3.event 的属性传递给缩放事件处理程序> 对象。

但是，您也可以使用 zoom.x(xScale) 和 zoom.y(yScale) 在缩放行为上注册一个定量(非顺序)比例。缩放行为将调整每个比例的域以反射(reflect)触发缩放事件之前的平移和比例，因此您所要做的就是使用这些比例重新绘制可视化。

您不必在缩放行为上注册您的比例，或者您可以注册一个比例但不注册另一个。例如，

• 如果您使用转换来缩放可视化 (a "geometric zoom", in d3 parlance)，则根本不需要更改比例；
• 如果你是using a polar coordinates system ，而不是 x/y 坐标，您需要直接计算调整；
• 如果你有一个 a meaningful baseline, but very dense data 的图表，您可能想要缩放/平移水平轴而不是垂直轴。

从评论来看，最后一种情况似乎反射(reflect)了您的情况。