在d3中添加图像/图标而不是svg形状

Adding image/icon instead of svg shape in d3

本文关键字：svg 形状 图标 d3 添加 图像      更新时间：2023-09-26

我可以使用下面的方法定位矩形。我想将这些矩形替换为image/icon(jpg/url) 

for(var i=0; i< tempdata.length; i++)
    {
        var name = "rect"+i;
    d3.select("#floor svg").selectAll('rect')
        .data(tempdata).enter()
        .append("svg:rect")
        .attr("stroke", "black")
        .attr("fill", (d,i)=>tempdata[i].SENSOR_COLOR)
        //.attr("r", 5)
        .attr("width", 20)
        .attr("height", 20)
        .attr("x", (d,i)=>tempdata[i].CX)
        .attr("y", (d,i)=>tempdata[i].CY)
        .attr("idCircle",(d,i)=>name)
}

首先:不要在D3中使用for循环来检索数据。D3已经提供了绑定和检索数据所需的所有功能。实际上，在一些情况下，使用for循环是一个好主意，但这不是其中之一。

关于你的问题:不用append("rect")，你必须用append("image"):

var images = svg.selectAll(".images")
    .data(data)
    .enter()
    .append("image");

在这个演示片段中，我设置了data数组中图像的url，使用一个方便地命名为url的键。然后，您必须使用:

附加它们。
.attr("xlink:href", function(d){return d.url})
下面是演示代码片段，使用favicons: 

var svg = d3.select("body")
  .append("svg")
  .attr("width", 200)
  .attr("height", 200);
var data = [{url:"https://dab1nmslvvntp.cloudfront.net/wp-content/uploads/2009/02/amazon.gif", x:20, y:40},
            {url:"https://dab1nmslvvntp.cloudfront.net/wp-content/uploads/2009/02/skype.gif", x:90, y:110},
            {url: "https://dab1nmslvvntp.cloudfront.net/wp-content/uploads/2009/02/espn.gif", x:150, y:150},
            {url: "https://dab1nmslvvntp.cloudfront.net/wp-content/uploads/2009/02/twitter.gif", x:180, y:50}];
var images = svg.selectAll(".images")
  .data(data)
  .enter()
  .append("image");
images.attr("xlink:href", function(d){return d.url})
  .attr("x", function(d){return d.x})
  .attr("y", function(d){return d.y})
  .attr("width", 16)
  .attr("height", 16);
<script src="https://d3js.org/d3.v4.min.js"></script>

相关文章：