如何与 svg 组一起移动元素

Question

我有一个附加在拖放上的圆圈。当我用鼠标移动组时，我希望圆圈与组一起移动

这是我尝试过但不起作用的方法：

//targetG is the group element

targetG.append("rect")
                        .attr("fill", "none")
                        .style("stroke", "black")
                        .style("stroke-width", "2px")
                        .attr("width", 200)
                        .attr("height", 200)
                        .style("fill", "white")
                        .call(
                                d3.behavior.drag()
                                .on('drag', moveRect).origin(function () {
                            var t = d3.select(this);
                            return {x: t.attr("x"), y: t.attr("y")};
                        }));

这是小提琴中的完整代码： http: //jsfiddle.net/vk62y7un/

Answer 1

有几个小问题需要解决。

您的翻译组件分割函数按 , 分割。

翻译=（translate.substring（0，translate.indexOf（“）”）））.split（“，”）;

虽然这在 Chrome 中有效，但对于 IE 应该按空格分割。

translate = (translate.substring(0, translate.indexOf(")"))).split(",");
if (translate.length === 1)
    translate = translate[0].split(' ');

因此，圆圈没有附加到 g 上。

您的（容器）拖动事件附加到 g 内的矩形。这应该附加到 g 上。相应地，拖动函数应该操纵变换（平移）属性，而不是 x 和 y。

var targetG = svg.append("g")
        .attr("transform", "translate(150,150)")
        .call(
        d3.behavior.drag()
        .on('drag', moveRect).origin(function () {
        ...

和

function moveRect() {
    d3.select(this)
            .attr('transform', 'translate(' + d3.event.x + ' ' + d3.event.y +')');
}

原点（现在的 g）应该是拖动开始时的（已解析的）变换（翻译）属性。

        ....
        var tc = d3.select(this).attr('transform').replace(/[a-z()]/g, '').split(' ');
        if (tc.length === 1)
            tc = tc[0].split(',')
        return { x: Number(tc[0]), y: Number(tc[1]) };
    }));

请注意， ===1 检查并拆分 - 这样它才能在 IE 和 Chrome 中工作。

Fiddle（适用于 IE 和 Chrome）- http://jsfiddle.net/3hyu6om8/