Question

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

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

Select

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

Answer 1

需要修复一些小问题。

您的翻译组件拆分功能正在拆分，。

translate =（translate.substring（0，translate.indexOf（＆＃34;）＆＃34;）））。split（＆＃34;，＆＃34;）;

虽然这适用于Chrome，但它应该按空格分割IE。

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

由于这个原因，圆圈没有附着在g上。

您的（容器）拖动事件附加到g内的矩形。这应该附在g上。相应地，拖动函数应该操纵transform（translate）属性而不是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中使用。

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

Answer 2

问题是当您尝试拖动矩形时，不要选择圆圈。我做了一些更改，你可以沿着矩形拖动圆圈。

将此部分添加到您的代码中：

var groupAll = d3.behavior.drag()
        .origin(Object)
        .on("drag", function(d, i) {
        var child = this;
        var move = d3.transform(child.getAttribute("transform")).translate;
        var x = d3.event.dx + move[0];
        var y = d3.event.dy + move[1];
        d3.select(child).attr("transform", "translate(" + x + "," + y +   ")");

        });

完整代码here。

如何与svg组一起移动元素

2 个答案: