Adding image/icon instead of svg shape in d3

Question!

I could locate rectangle using the following. I want to replace these rectangles with 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)
}


Answers

First of all: don't use for loops to retrieve data in D3. D3 already provides all you need to bind and retrieve your data. Indeed, there are several situations where it's a good idea to use a for loop, but this is not one of them.

Regarding your question: instead of append("rect"), you have to use append("image"):

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

In this demo snippet, I set the url of the images in the data array, using a key conveniently named url. Then, you have to append them using:

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

Here is the demo snippet, using 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>



Instead of each time accessing Appointment object's ApptDateTime_Date property like this

var dateRef = "Calendar.Scheduling.field.Appointment.ApptDateTime_Date";

you can set following code at one place in your code

var appointment = $scope.Calendar.Scheduling.field.Appointment;

above code holds reference to Appointment object in appointment variable

then you can form dataRef each time you pass as it as parameter

var dateRef = \"+ appointment + ".ApptDateTime_Date" +\";
By : Ravi Teja


There is a way if the first element is the only one to start with that character:

$ a=(asd fgh ijk)
$ echo "${a[@]^[!${a:0:1}]}"
asd Fgh Ijk

This extracts the very first character of the first element, then excludes that character from being uppercased; [!${a:0:1}] expands to [!a], which matches only f and i as the first characters of their elements.

It fails if multiple elements start with the same character, though:

$ a=(asd agh ijk)
$ echo "${a[@]^[!${a:0:1}]}"
asd agh Ijk


This video can help you solving your question :)
By: admin