我正在使用d3.js v4.我目前正在实施程序化缩放.这Panning and Zooming Tutorial有很大的帮助.我的缩放适用于滚轮,但我想创建缩放按钮.我知道缩放和平移的必要条件是平移[tx,ty]和比例因子k.我正在为x-Axis使用时间刻度.通过在x轴上获取p1(点1)和p2(点2)的像素值,然后使用这些值得到k(比例因子),我设法得到tx和比例因子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/

我试过的

>阅读zoom 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"," + 80 + ")");

}