javascript - 使用图像数组绘制 SVG 图像。

Question

我有一个包含图像名称的数组，我想创建一个 svg Canvas 并将它们放置在正确的行和列中，以便它不会重叠。这是我的代码。

<script type="text/javascript">

var imagesObjects = ["1.png","2.png","3.png","4.png","6.png","3.png","4.png","6.png","1.png","2.png","3.png","4.png","6.png","1.png","2.png"];



var iconsArea = d3.select("#icons").data(imagesObjects)
                                            .enter()
                                            .append("svg:image")
                                            .attr("xlink:href", function(d){
                                                console.log(d);
                                                return "images/"+d;
                                            })
                                            .attr("width", 20)
                                            .attr("height", 20)
                                            .attr("x", function(d, i){
                                                return i*10;
                                            })
                                            .attr("y",function(d, i){
                                                return i*10;
                                            });
    </script>

但是当我运行这个时，我的标签不会附加到 Canvas 上。我得到的只是一 block 空白的 Canvas 。谁能指出我的错误

Answer 1

我不太清楚你为什么说 svg canvas，因为这是两个不同的东西，但你正在附加 svg:image 所以我假设你正在使用 svg。

是否有带有 id="icons" 的 svg 元素？您必须选择要创建的所有图像作为占位符并将数据绑定(bind)到它。基本上我只是添加了 .selectAll("image")。

var iconsArea = d3.select("#icons").selectAll("image")
    .data(imagesObjects)
    .enter()
  .append("svg:image")
    .attr("xlink:href", function(d){
        console.log(d);
        return "images/"+d;
    })
    .attr("width", 20)
    .attr("height", 20)
    .attr("x", function(d, i){
        return i*10;
    })
    .attr("y",function(d, i){
        return i*10;
    });