javascript - d3 嵌入图像显示两次

Question

我正在 d3 图上嵌入图像，如下所示 example :

  var logoCanvas = d3.select("body").append("canvas")
    .attr("id", "newCanvas")
    .attr("width", width / 2)
    .attr("height", height / 2)
    .node();

  var context = logoCanvas.getContext("2d");
  var imageObj = new Image();
  imageObj.src = 'myImage.svg';
  imageObj.onload = function() {
    context.drawImage(imageObj, 0, 0);
    var imageData = document.getElementById("newCanvas").toDataURL("image/png")
    //Add as SVG image element
    d3.select("svg").
    append("image")
      .datum(imageData)
      .attr("height", 100)
      .attr("width", 100)
      .attr('transform', 'translate(' + [offsetX - 50, offsetY - 50] + ')')
      .attr("xlink:href", function(d) {
        return d
      })
  }

这一切都按预期工作，但不幸的是我的图像显示了两次。基本上我只需要附加的一个而不是绘制到上下文中的那个。问题是，如果不先绘制它，我就无法获得附加的。

有没有办法隐藏在上下文中绘制的图像？

或者是一种更聪明的方法，只显示但嵌入一张图像？

Answer 1

这是一个code用于获取图像并将其“嵌入”到 SVG 中的 XMLHTTPRequest() 和 FileReader() 方法的片段。您根本不需要 Canvas 。

// append svg
d3.select("body").append("svg").attr("height", "300px").attr("width", "276px");

var xhr1 = new XMLHttpRequest();
xhr1.open('GET', 'https://s7.postimg.org/40f9flc1n/dummy1.png');
xhr1.responseType = 'blob';
xhr1.onload = function () {
  var fs = new FileReader();
  fs.onload = function (result) {
    d3.select("svg").append("image")
      .datum(result.target.result)
      .attr("height", 300)
      .attr("width", 276)
      .attr("xlink:href", function(d) {
        return d
      })
  };
  fs.readAsDataURL(xhr1.response);
};
xhr1.send();

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.7/d3.min.js"></script>

希望这有帮助。 :)