Question

我正在尝试将dragover行为应用于固定的SVG圈，当我的一个d3强制布局节点（也附加了SVG圈）被拖过它时。

我在网上发现很多类似的问题似乎都指向使用像svg.js或snapsvg这样的库 - 或者只是自定义你可以在这里找到的碰撞检测功能：http://bl.ocks.org/mbostock/3231298（这是什么我正在尝试做。）

到目前为止，我有这个......

function detectCollisionWithFixedSVGShape(alpha) {

        var quadtree = d3.geom.quadtree(my_nodes);

        return function (d) {

            var r = d.radius + radius.domain()[1] + padding,

            nx1 = d.x - r,
            nx2 = d.x + r,
            ny1 = d.y - r,
            ny2 = d.y + r;

            quadtree.visit(function (quad, x1, y1, x2, y2) {
                if (quad.point && (quad.point !== d)) {

                    var xCoordinateOfFixedSVG = 40; //40 is the x-pixel distance of my fixed SVG circle
                    var yCoordinateOfFixedSVG = 343.75; //343.75 is the y-pixel distance of my fixed SVG circle

                    var xDistanceFromFixedSVG = xCoordinateOfFixedSVG - quad.point.x;
                    var yDistanceFromFixedSVG = yCoordinateOfFixedSVG - quad.point.y;

                    var actualDistance = Math.sqrt(xDistanceFromFixedSVG * xDistanceFromFixedSVG + yDistanceFromFixedSVG * yDistanceFromFixedSVG);

                    var radiusBetweenPoints = quad.point.radius + 30; //30 is the radius of my fixed SVG circle container

                    if (actualDistance < radiusBetweenPoints) {
                        console.log("you dragged over my SVG circle container");
                    }               
                }
            });
        };
    }

以常规方式在我的tick函数中调用...

node.each(detectCollisionWithFixedSVGShape(jitter))

当我加载页面并开始拖动节点并观察控制台上的“你拖过我的SVG圆形容器”消息时，有一个半径约为30像素（正确）的点，它会显示消息 - 但是它不是我期望的固定点（40,343.75）。它实际上位于页面右侧的一百个左右像素点（类似于200,343.75）。

我想现在很明显我遇到了问题，但是碰撞检测只与svg画布有关 - 所以它在我的画布上下文中查看40,343.75但是缺少固定的SVG组件实际上是在画布外面的div内部，占据了页面左侧的前150个像素。

这是一个很长的方式来询问是否有任何解决方法？我不能包含固定的SVG容器而不是画布，因为它可以像所有其他节点一样被拖动/缩放等。谁能想到一种合适的方法来使碰撞检测功能适应参考绝对页面坐标？

非常感谢任何想法！

在Lars和Cool Blue的评论后编辑......

我正在尝试手动“转换” - 节点受到2个g元素的影响...

- ＆GT;单个父元素g（带有翻译x / y和scale []），它封装了所有节点

---＆GT;每个节点都存在的子g元素（只有一个翻译）

所以在拖累时，我正在计算这个......

var transformedParent = d3.transform(d3.select(this.parentNode).attr("transform")).translate;
                    var scaledParent = d3.transform(d3.select(this.parentNode).attr("transform")).scale;

                    var transformedChild = d3.transform(d3.select(this).attr("transform")).translate;

                    //parent g will be undefined until first drag event
                    if (transformedParent==undefined) {
                        transformedParent[0] = 0;
                        transformedParent[1] = 0;
                    }
                    if (scaledParent==undefined) {
                        scaledParent[0] = 1;
                        scaledParent[1] = 1;
                    }

                    var untransformedx = (transformedChild[0]*scaledParent[0]) - (transformedParent[0]);
                    var untransformedy = (transformedChild[1]*scaledParent[1]) - (transformedParent[1]);

                    console.log("Untransformed node x: " + untransformedx);
                    console.log("Untransformed node y: " + untransformedy);

但是一旦我拖动画布，我的计算“未转换”计算就会消失 - 我觉得我现在缺少一些非常基本的东西，因为这似乎是一个简单的计算来转换节点位置？

使用d3碰撞检测SVG上的dragover行为

0 个答案: