Question

我想实现沿x和y轴平移svg对象以及仅沿x轴进行语义缩放。

只要d3.event.transform对象同时包含缩放和平移的计算值，每当我彼此调用平移和缩放时，新转换的y值都是错误的，因为它们忽略了\而不忽略先前的相反值动作。（缩放会忽略平移动作的d3.event.transform.y，而平移不会忽略缩放动作的d3.event.transform.y）

如果您在svg区域中进行缩放，则圆圈仅应平移x坐标，而y坐标应保持与以前相同（考虑到以前的平移）

现在，由于y值错误，圆圈正在“跳跃”。

if (isZoom)
{//zoom     
    return "translate(" + t.apply(d)[0] + "," + (d[1]) +")"; //ignores previous panning-only values and positions to static initial value
}   

//panning
return "translate(" + t.apply(d)[0] + "," + (t.y + d[1]) +")"; //how to ignore portion of t.y belonging to previous zooming?

您可以取消注释此行代码，以防止圆圈跳动，但缩放时y会改变（不应该）

//ignore isZoom and apply both for panning and zooming
return "translate(" + t.apply(d)[0] + "," + (t.y + d[1]) +")";

https://jsfiddle.net/197cz2vj/

谢谢！

更新

最后，我想出了一个类似hack的解决方案。我不喜欢它，我仍在寻找合适的解决方案（我不喜欢确定isZoom动作以及deltaPanY解决方案。对于d3 libray的将来更改，这都是可以接受的）。在这里：

每次变换更改并且由mousemove（平移）触发更改时，更新deltaPanY变量，将新值与转换的旧记忆值进行比较。（我也复制了t.x和t.k，但出于我的目的，只需要t.y和deltaPanY。）

function copyLastTransform(t)
{
    lastTransform = 
    {
        x: t.x,
        y: t.y,
        k: t.k
    };
};

每次进行转换时，都要设置增量变量并存储上一次转换：

if (isZoom)
{
   deltaZoomY += t.y - lastTransform.y;
}
else
{
   deltaPanY += t.y - lastTransform.y;
}

copyLastTransform(t);

现在翻译功能如下：

return "translate(" + t.apply(d)[0] + "," + (deltaPanY + d[1]) +")";

分叉的小提琴： https://jsfiddle.net/xpr364uo/

d3.js v4 svg语义缩放和平移（沿x轴和y轴平移，仅沿x轴缩放）

0 个答案: