d3嵌入图像显示两次答案

【问题标题】：d3 embeded image displayed twiced3嵌入图像显示两次
【发布时间】：2018-05-01 09:18:29
【问题描述】：

我在 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
      })
  }

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

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

还是只显示一个图像但嵌入的更聪明的方法？

【问题讨论】：

您可以尝试通过使用XMLHTTPRequest 和FileReader 读取图像来获取图像的base64 代码吗？如果您不确定如何操作，请在图片中添加fiddle，我会为您提供帮助。
如果你有 base64 代码，你根本不需要画布。

标签： javascript image d3.js embed

【解决方案1】：

这是XMLHTTPRequest() 和FileReader() 方法的code sn-p 方法，用于获取图像并“嵌入”到SVG 中。你根本不需要画布。

// 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();

&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.7/d3.min.js"&gt;&lt;/script&gt;

希望这会有所帮助。 :)

【讨论】：