d3.js - 如何与 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")};
                        }));

这是 fiddle 的完整代码: http://jsfiddle.net/vk62y7un/

Answer 1

有几个小问题需要解决。

您的翻译组件拆分功能被 , 拆分。

translate = (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/