Hinzufügen von Bild/Symbol anstelle von Svg Shape in d3

Question

Ich könnte Rechteck mit dem folgenden finden. Ich möchte diese Rechtecke mit Bild/Symbol (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

Vor allem ersetzen: Verwenden Sie keine for Schleifen Daten in D3 abzurufen. D3 bietet bereits alles, was Sie zum Binden und Abrufen Ihrer Daten benötigen. In der Tat, es gibt mehrere Situationen, in denen es eine gute Idee ist, eine for-Schleife zu verwenden, aber das ist keiner von ihnen.

Deine Frage zu: statt append("rect"), Sie haben append("image") zu verwenden:

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

In diesem Demo-Schnipsel, stellte ich die URL der Bilder in dem data Array, einen Schlüssel bequem namens url verwenden. Dann müssen Sie sie anhängen mit:

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

Hier ist die Demo-Schnipsel, mit 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>