d3.js - 在径向树中实现鱼眼失真时的转换问题

Question

基本上，我试图将 d3 鱼眼失真算法应用于径向树。我相信我遇到的问题围绕这样一个事实，即被馈送到鱼眼失真的坐标是由 d3.layout.tree 计算的坐标。但实际坐标已通过 g 变换进行了调整。因此，鱼眼失真导致的坐标需要调整回 g 变换。

例如:

// re-setting the projection according to fisheye coords
diagonal.projection(function(d) { d.fisheye = fisheye(d); return [d.fisheye.y, d.fisheye.x / 180 * Math.PI]; })

我一直在尝试这个...这里是 fiddle .

我有点接近...帮助表示赞赏。

Answer 1

按照我在评论中建议的方向，结果如下:

https://jsfiddle.net/xdk5ehcr/

我没有使用旋转和平移来定位节点，而是创建了两个基于三角函数的函数来根据数据 (x,y) 值计算水平和垂直位置，这些值被视为极坐标。

然后我不得不设置鱼眼函数来使用我的定位函数作为“访问器”函数而不是读取 d.x和 d.y直接地。不幸的是，您用于鱼眼的基本插件不包括获取和设置 x/y 访问器函数的方法，因此我也必须对其进行修改。我很惊讶它不在代码中；这是大多数 d3 布局对象的标准功能。

(当我设置 github 时，我将不得不提出一个拉取请求来添加它。不过，我需要弄清楚鱼眼缩放/缩放功能是如何工作的——我把它从这个例子中去掉了，因为你是不使用它。)

定位功能如下:

function getHPosition(d){
    //calculate the transformed (Cartesian) position (H, V)
    //(without fisheye effect)
    //from the polar coordinates (x,y) where 
    //x is the angle
    //y is the distance from (radius,radius)
    //See http://www.engineeringtoolbox.com/converting-cartesian-polar-coordinates-d_1347.html

    return (d.y)*Math.cos(d.x);
}
function getVPosition(d){
    return (d.y)*Math.sin(d.x);
};

这些函数用于设置节点和链接的原始位置，然后一旦鱼眼进入它在内部使用这些函数，返回结果(如果合适，带有失真)为 d.fisheye.x和 d.fisheye.y .

例如，对于表示投影设置的链接 d3.svg.diagonal像这样的初始化函数:

var diagonal = d3.svg.diagonal()
    .projection(function(d) { 
        return [getHPosition(d), getVPosition(d)]; 
});

但像这样更新:

diagonal.projection(function(d) { 
    d.fisheye = fisheye(d); 
    return [d.fisheye.x, d.fisheye.y]; 
});

还有一些其他的小变化:

我稍微简化了绘图区域的尺寸。

我添加了一个背景矩形 pointer-events:all;这样当鼠标在节点和空背景之间移动时鱼眼不会打开和关闭。

我没有费心旋转文本(因为节点组不再旋转，默认情况下不会发生)，但是您可以轻松地在单个文本元素上添加旋转变换。

最后，这个难倒我的时间比我想承认的要长，角度必须在 弧度 用于 Javascript 触发函数。无法弄清楚为什么我的布局是 so ugly, with overlapping lines .我认为这与在 d3.svg.diagonal() 之间切换有关和 d3.svg.diagonal.radial()并花了很多时间尝试做反触发和各种事情......