Javascript D3从本地文件插入图像 [英] Javascript d3 insert image from local file

问题描述

更新:我将最后两行更改为以下内容.

Update: I changed the last two lines to the following.

.append('img')
    .attr('src','images/testimage.png')

但是没有出现图像.它的位置有一个损坏的图像，因此我认为文件路径语法不正确或还有其他我看不到的东西.

But the image is not appearing. There is a broken image in its place so I believe either the file path syntax is incorrect or there's something else I'm not seeing.

原始帖子

我无法通过js渲染存储在本地目录中的图像.最后的2-3行代码就是问题所在.我不确定100％是否是文件路径的正确表示法(我认为它基于此

I'm having trouble rendering an image stored in my local directory via js. The last 2-3 lines of code is where the issue is. I'm not 100% sure if that's the correct notation for the file path (I think it is based on this thread.

d3.select("#solve")
  .append('h2')
  .text("Solve.")

for (var i = 0; i < response.length; i++){

    d3.select("#question")
          .append('p')
          .text(response[i]['id'])
          .append('p')
          .text(response[i]['statement'])
          .append('li')
          .text(response[i]['a1'])
          .append('li')
          .text(response[i]['a2'])
          .append('li')
          .text(response[i]['a3'])
          .append('li')
          .text(response[i]['a4'])
          .append('li')
          .text(response[i]['a5'])
          .append('div')
          .append('svg:image')
          .attr('href', 'file://C:/Users/Bryant/Documents/GitHub/ACT/static/js/images/testimage.png')


}

};

当我检查HTML元素时，这就是我得到的.但是，网页上没有图像.

When i inspect the HTML element, this is what I get. However no image appears on the webpage.

<image href="file://C:/Users/Bryant/Documents/GitHub/ACT/static/js/images/testimage.png"></image>

感谢您的帮助.

推荐答案

似乎您想使用d3js将图像元素添加到div选择中.您无需附加svg即可，您可以将img元素直接附加至div:

It seems like you want to add an image element to your div selection using d3js. You don't need to append an svg in order to do this, you can directly append your img element to your div:

const domElement = d3.select("#question");
const imagePath = 'https://cdn.dribbble.com/users/22018/screenshots/2456036/d3_1x.png';
domElement.append('img').attr('src', imagePath);

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<div id="question"></div>

这篇关于Javascript D3从本地文件插入图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！