Question

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

以下是比例的定义：

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

由于我的重绘功能，我需要保持比例（即使用this.yScale而不是var yScale）。诀窍是，如果你在D3的zoom.js d3.event.scale === 1函数中放置一个断点，可以看到平移=缩放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)在缩放行为上注册定量（非序数）比例。缩放行为将调整每个比例的域以反映在触发缩放事件之前的平移和缩放，因此您所要做的就是使用这些比例重绘可视化。

您无需在缩放行为上注册刻度，也可以注册一个刻度而不是另一个刻度。例如，

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

从评论中，听起来最后一种情况反映了你的情况。

为什么d3会在缩放过程中重新缩放所有音阶？

1 个答案: