Question

我有以下d3代码：

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

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

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

Answer 1

使用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>

Answer 2

我猜你的意思是这样说：

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

或者只是这样做：

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

显示图片的功能不起作用

2 个答案: