javascript - 在 D3 中选择和移动导入的 SVG 文件

Question

我正在尝试使用 d3，并且我一直在尝试使用我用 Illustrator 制作的简单 svg 图像。

我可以将 submarine.svg 图像附加到我的工作文档中，但我无法选择它并调整它的位置。

我知道我可以用另一种方式做到这一点，但我想了解更多关于 d3 的信息。

这是我尝试将 svg 放置在 x 轴上 500px 处。

var submarine = d3.xml("submarine.svg", "image/svg+xml", function(xml) { document.body.appendChild(xml.documentElement)
      }) d3.select(this).attr("x","500");

Answer 1

请看这个例子:http://jsfiddle.net/y1ye2u8s/2/

// Define a drag behavior for the image.
var drag = d3.behavior.drag()
    .on("drag", dragmove);

// Function that is called upong dragging.
function dragmove(d) {

      var x = d3.event.x;
      var y = d3.event.y;

      // Select and move the image upon dragging.
      d3.select(this)
          .attr("transform", "translate(" + (x-200) + "," + (y-200) + ")");
}

d3.xml("https://rawgit.com/VengadoraVG/moving-to-gnulinux/master/img/tux.svg", "image/svg+xml", 

    function (xml) {

        // Add the image to the document.
        document.body.appendChild(xml.documentElement);

        // Select the svg element representing the image.
        d3.select("svg")

            // Set the svg viewport dimensions.
            .attr("width", "1000")
            .attr("height", "1000");

       // Apply the drag behavior to the image.
       d3.select("svg").select("g")
            .call(drag);    

});