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

Question

我可以使用以下方法找到矩形。 我想和图像/图标（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) 
} 

Answer 1

所有首先更换这些矩形：不使用for循环D3中检索数据。 D3已经提供了所有你需要绑定和检索你的数据。实际上，在几种情况下，使用for循环是个好主意，但这不是其中之一。

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

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

在本演示片段中，我设置了图像的URL data阵列中，使用便利名为url关键。然后，你必须使用附加这些：

.attr("xlink:href", function(d){return d.url}) 

这里是演示片段，使用网站图示：

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>