javascript - 问题 w/Programmatic Zoom v4

Question

我正在使用 d3.js v4。我目前正在实现程序化缩放。这Panning and Zooming Tutorial帮助很大。我的缩放适用于滚轮，但我想创建按钮来缩放。我知道缩放和平移所必需的是翻译 [tx, ty] 和比例因子 k。我正在为我的 x 轴使用时间刻度。通过获取 p1(点 1) 和 p2 的像素值，我设法获得了 tx 和 k 的比例因子(点 2) 在 x 轴上，然后使用这些值获得 k(比例因子)。像这样:

var k = 500 / (xScale(p2) - xScale(p1)); //500 is desired pixel diff. between p1 and p2, and xScale is my d3.scaleTime() accessor function.
// for this zoom i just want the first value and last value to be at scale difference of the entire width.

然后我通过这个计算 tx:

var tx = 0 - k * p1;

然后将其输入 d3.zoomIdentity() 并重新缩放我的 xdomain。我创建了一个按钮来缩小。问题是当我放大然后尝试使用按钮缩小时，它缩小了，但缩小了 x 轴。我似乎无法找出为什么它会缩小 x 轴而不是正确缩小。

我的 JSFiddle

https://jsfiddle.net/codekhalifah/Lmdfrho7/2/

我尝试过的

• 阅读缩放 Documentation
• 通读有关放大的章节 D3.js in action

我的代码

应用滚轮缩放后我运行这个函数:

 function zoomed() {
        if (d3.event.sourceEvent && d3.event.sourceEvent.type === "brush") return; // ignore zoom-by-brush  
var t = d3.event.transform;
console.log(t);
console.log(xScale.domain());
xScale.domain(t.rescaleX(x2).domain());
usageAreaPath.attr("d", area);
usageLinePath.attr('d',line);
weatherAreaPath.attr('d',weatherChart.area);
focus.select(".axis--x").call(xAxis);
focus.selectAll('.circle')
    .attr('cx', function(d) { return xScale(getDate(d)); })
    .attr('cy', function(d) { return yScale(d.kWh); })
    .attr("transform", "translate(0," + 80 + ")");

        ... other non related items
    }

缩放工作正常，但在放大然后手动尝试缩放回我想要的正常位置后。我的手动缩放按钮功能

function programmaticZoom(){
 var currDataSet = usageLinePath.data()[0], //current data set
        currDataSetLength = currDataSet.length,//current data set length
        x1 = currDataSet[0].usageTime, //getting first data item
        x2 = currDataSet[currDataSetLength-1].usageTime, //2nd data item
        x1px = xScale(moment(x1)), //Get current point 1
        x2px = xScale(moment(x2)); // Get current point 2

        // calculate scale factor
        var k = width / (x2px - x1px); // get scale factor
        var tx = 0 - k * x1px; // get tx
        var t = d3.zoomIdentity.translate(tx).scale(k); //create zoom identity

        xScale.domain(t.rescaleX(window.x2).domain());
        usageAreaPath.attr("d", area);
        usageLinePath.attr('d',line);
        weatherAreaPath.attr('d',weatherChart.area);
        focus.select(".axis--x").call(xAxis);
        focus.selectAll('.circle')
            .attr('cx', function(d) { return xScale(getDate(d)); })
            .attr('cy', function(d) { return yScale(d.kWh); })
            .attr("transform", "translate(0," + 80 + ")");

}

Answer 1

我已经研究了一段时间了，我得到了它某种的工作，有一件事我无法弄清楚，但你也许可以，因为你看起来更比我熟悉d3。在你的programmaticZoom()函数，我注意到 tx是图形开始位置的偏移量，k是规模。使用这个，我改变了 block :

var k = width / (x2px - x1px); // get scale
var tx = 0 - k * x1px; // get tx
var t = d3.zoomIdentity.translate(tx).scale(k);

到

var k = 1;
var t = d3.zoomIdentity.scale(k);

首先，当k = 1.0 ，图形将完全适合窗口。我相信设置的原因k它以前的值是错误的，当你增加k的值时这样k > 1.0 ，它将图形的宽度拉伸(stretch)到屏幕之外。必须重新调整图表上的内容，使其在图表上 占据尽可能多的空间，同时仍在屏幕范围内。与 k < 1 ，这就是 width / (x2px - x1px); 发生的情况，图形缩小到小于屏幕大小。像这样重新调整只会使图表的内容适合在图表中可以占据的最大值，但是由于图表比屏幕小，它会被重新调整以适合缩小的图表并出现小于屏幕。

我摆脱了tx完全是因为它偏移了图形的起始位置。当图表被放大时，它的宽度被拉伸(stretch)到屏幕之外。在此处进行偏移是有意义的，因为您需要使偏移量等于您想要开始查看图形的位置，并允许不需要的部分远离屏幕。在您一直缩小的情况下，图表是屏幕的大小，因此偏移将导致您的图表不会从屏幕的开头开始，而是插入一部分它离开屏幕。在您的情况下，使用 k已经缩小了图形，偏移量导致缩小的图形出现在屏幕中间。但是，如果图形没有缩小，偏移量会将图形的一部分推离屏幕。

通过更改它，缩小按钮似乎 可以工作，但是仍然存在问题。在zoomed()功能，你设置var t = d3.event.transform; . d3.event.transform包含 k, x, and y 的值需要是 1, 0, and 0分别在完全缩小时。我无法更改 programmaticZoom() 中的这些值虽然功能，因为d3.event.transform仅在触发事件后存在，特别是鼠标滚轮。如果您能够将这些值设为 k = 1, x = 0, y = 0仅当单击缩放按钮时，问题才应完全解决。

希望这对某些人有所帮助，我对 d3 不是很熟悉，但这应该可以解决您的大部分问题，并希望让您了解出了什么问题。