文章/答案/技术大牛

发布

问d3嵌入式图像显示两次
EN

Stack Overflow用户

提问于 2017-11-17 14:47:14

回答 1查看 44关注 0票数 1

我在d3图上嵌入了一个图像，就像在这个示例中一样

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

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

是否有一种方法来隐藏在上下文中绘制的图像？

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

javascript

image

d3.js

embed

回答 1

Stack Overflow用户

回答已采纳

发布于 2017-11-17 16:06:05

下面是一个代码片段，它是一种XMLHTTPRequest()和FileReader()方法，用于获取图像并“嵌入”到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();

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

希望这能有所帮助。:)

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/47353314

复制

相似问题

问d3嵌入式图像显示两次
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问d3嵌入式图像显示两次EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问d3嵌入式图像显示两次
EN