Javascript 问题w/v4

我使用的是

d3.jsv4

。我目前正在实现编程缩放。这帮了大忙。我的缩放功能使用滚轮，但我想创建缩放按钮。我知道缩放和平移所需的是平移

[tx，ty]

和比例因子

k

。我正在使用x轴的时间刻度。我已经设法获得了

tx

和

k的比例因子，方法是获得x轴上
p1（点1）
和
p2（点2）
的像素值，然后使用这些值获得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轴而不是正确地缩小

我的JSFIDLE


我尝试过的


读取缩放
通读有关放大的章节

我的代码

应用滚轮缩放后，我运行此功能：

 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 + ")");

}

我已经研究了一段时间了，我发现它可以工作了，有一件事我不知道，但你可能能弄明白，因为你似乎比我更熟悉d3。在
programmaticZoom（）
函数中，我注意到
tx
是图形起点的偏移量，
k
是刻度。使用此选项，我更改了块：

var k=width/（x2px-x1px）；//获取规模
var tx=0-k*x1px；//获取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
时，它会将图形的宽度拉伸到屏幕之外。必须重新调整图形上的内容，使其尽可能占据图形上的空间，同时仍在屏幕范围内。对于
k<1
，这就是
宽度/（x2px-x1px）的情况，图形缩小到小于屏幕大小。这样重新调整只会使图形的内容适合于在图形中占据最大值，但由于图形比屏幕小，因此将重新调整以适合缩小的图形，并使其看起来比屏幕小

我完全去掉了
tx
，因为它偏移了图形开始的位置。当图形放大时，它的宽度会延伸到屏幕上方。在这里进行偏移是有意义的，因为您需要使偏移量等于开始查看图形的位置，并允许不需要的部分保持在屏幕之外。如果要一直缩小，图形就是屏幕的大小，因此偏移会导致图形不会从屏幕的开头开始，而是将部分图形推离屏幕。在你的例子中，用<代码> k>代码>已经收缩了图表，偏移导致收缩的图形出现在屏幕的中间。但是，如果图形没有缩小，偏移量会将图形的一部分从屏幕上推出

通过更改该选项，“缩小”按钮似乎可以工作，但仍然存在问题。在
zoomed（）
函数中，设置
var t=d3.event.transform。
d3.event.transform
包含
k、x和y的值，这些值在完全缩小时需要分别为
1、0和0
。但是，我无法在
programmaticZoom（）
函数中更改这些值，因为
d3.event.transform
仅在触发事件后存在，特别是鼠标滚轮。如果仅在单击缩放按钮时才能将这些值设置为
k=1、x=0、y=0
，则应完全修复该问题

希望这对一些人有所帮助，我对d3不是很熟悉，但这将解决您的大部分问题，并希望让您了解出了什么问题。
只是为了澄清；你想让你的缩放按钮总是缩放回默认的初始视图吗？@Hamms嗯，我想实际上能够缩放到不同的级别。这只是我的第一个测试级别。但在时间尺度上，我想从月视图缩放到周视图，再缩放到一天，再缩放到小时，再缩放到15分钟。我的第一个测试水平是回到过去的几个月，有什么想法吗？