Adding image/icon instead of svg shape in d3


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;"#floor svg").selectAll('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)


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

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 ="body")
  .attr("width", 200)
  .attr("height", 200);

var data = [{url:"", x:20, y:40},
            {url:"", x:90, y:110},
            {url: "", x:150, y:150},
            {url: "", x:180, y:50}];

var images = svg.selectAll(".images")

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=""></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