Question

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

Answer 1

首先：不要使用for循环来检索D3中的数据。 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})

以下是演示片段，使用favicon：

＆＃13;

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

＆＃13;

<script src="https://d3js.org/d3.v4.min.js"></script>

＆＃13;

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

1 个答案: