Question

请参阅以下D3示例：

https://bl.ocks.org/mbostock/f48fcdb929a620ed97877e4678ab15e6

在此示例中，用户可以在屏幕上绘制画笔，然后图形缩放到画笔封装的区域。此示例的工作方式是根据画笔范围更新x和y缩放域。你可以在brushended（）函数中看到它。

我希望实现同样的功能。但是，我不想更新x和y比例域，但想要更新缩放比例和翻译。以下示例为地图实现了此目的：

https://bl.ocks.org/mmazanec22/586ee6674f52840492c16cc194aacb1f

你可以看到这是brushend（）函数。在这里，作者根据画笔范围计算比例和平移，然后使用它们设置新的比例并转换为缩放行为。我希望实现这一点，以获得散点图。

我写了一个关于我在这个jsfiddle中尝试过的例子：https://jsfiddle.net/SSS123/uxdd760k/1/ - 看看我做我的比例并翻译计算的部分：

            var extent = brush.extent();

            // Get box coordinates
            var lowerX = d3.min([extent[0][0], extent[1][0]]);
            var upperX = d3.max([extent[0][0], extent[1][0]]);
            var lowerY = d3.min([extent[0][1], extent[1][1]]);
            var upperY = d3.max([extent[0][1], extent[1][1]]);

            var scale = Math.max( ( width / (x(upperX) - x(lowerX)) ), ( height / (y(upperY) - y(lowerY)) ) );

            graphContainer.transition()
                .duration(750)
                .call(zoom.scale(scale).translate([-x(lowerX), -y(upperY)]).event);

我相信现在可以正常使用宽度与高度相同的画笔，例如，如果你尝试在xAxis上绘制一个从0到5伸展的框，在yAxis上绘制0到5的框这将放大很好。

但是，如果您在xAxis上绘制一个0 - 5的框，但在yAxis上绘制0 - 30，那么这将不再计算合理的缩放比例。

有没有人建议如何解决这个问题？

D3：使用画笔缩放到特定间隔

0 个答案: