Question

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

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

但是当我运行它时，我的标签不会附加到画布上。我得到的只是一块空白画布。任何人都可以指出我的错误

Answer 1

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

是否有id="icons"的svg元素？您必须选择要创建的所有图像作为占位符并将数据绑定到它。基本上我只是添加了.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;
    });

使用图像阵列绘制SVG图像。

1 个答案: