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