显示图像的功能不起作用

Question

我有以下 d3 代码：

function show_image(source) {
 d3.select("#static-a").append("image").attr("src", source);
}

我知道选择的第一部分是正确的，并且源变量是调用函数时有效的本地相对引用路径：

show_image("../images/image_netflix.png");

Answer 1

我猜你的意思是：

append("<img>").attr("src", source);

或者只是这样做：

append($("<img>", {"src":source }));

Answer 2

使用 img 而不是 image。

d3.select("body")
  .append("button")
  .on("click", function() {
   show_image("http://www.logosdesigners.com/images/img_example.jpg");
  })
  .text("Show Image");

function show_image(source) {
  d3.select("#static-a").selectAll("img").remove(); //Removing existing images
  d3.select("#static-a").append("img").attr("src", source); //Appending new image
}

img {
  width: 200px;
  height: 200px;
}

#static-a {
  float: left;
  width: 200px;
  height: 200px;
  border: 1px solid teal;
}

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

显示图像的功能不起作用

function to display an image doesn't work

javascript

selection

d3.js