Question

我在使用d3.js拖动一组元素时出现问题，首先我使用以下代码加载外部svg文件：

    function loadSVG(file) {
        d3.xml(file, "image/svg+xml", function(xml) {
            document.body.appendChild(xml.documentElement)

            d3.selectAll("g").call(drag).data([{ x: 0, y: 0 }]).enter();

        })
    }

正如您所看到的，我还使用x和y数据在其上设置拖动行为，该数据将在dragMove函数中使用。这样，拖动就会很平滑而不会在它开始时跳转。

正如您在下面的代码中所看到的，我尝试使用dragMove方法访问数据（x＆amp; y）：

    function dragMove(d) {
        d.x += d3.event.dx;
        d.y += d3.event.dy;
        d3.select(this).attr("transform", "translate(" + d.x + "," + d.y + ")");
    }

但是，当我尝试此代码时，我在控制台中收到以下错误：

Uncaught TypeError: Cannot read property 'x' of undefined

我的猜测是将x and y data添加到svg组本身出了问题。我尝试了各种不同的方法来实现这一目标，但我一直都在失败。这是完整的脚本a.t.m。

    var drag = d3.behavior.drag()
        .on("dragstart", dragStart)
        .on("drag", dragMove)
        .on("dragend", dropHandler);

    //loads a svg file and add it to the body
    function loadSVG(file) {
        d3.xml(file, "image/svg+xml", function(xml) {
            document.body.appendChild(xml.documentElement)

            d3.selectAll("g").call(drag).data([{ x: 50, y: 50 }]).enter();

        })
    }

    loadSVG("images/layers.svg");

    function dragStart(d) {
    }

    function dragMove(d) {
        d.x += d3.event.dx;
        d.y += d3.event.dy;
        d3.select(this).attr("transform", "translate(" + d.x + "," + d.y + ")");
    }

    function dropHandler(d) {
        // alert('dropped');
    }

我从以下2个链接获得了一些信息： How to drag an svg group using d3.js drag behavior? https://github.com/mbostock/d3/wiki/Selections#data

d3.js从加载的文件中拖动组

0 个答案: