title: Unable to append images over nodes in d3.js
body: <p>I am trying to append images on rectangles and images locations are present in my array named arrFileUrl. Nodes of this color are white and I want to append these images on each of the generated rectangles. How can I do this?</p>
  
  <pre><code>var arrFileUrl = [], arrBrightness = [], arrPattern = [], arrSize = [];
  
  var width = 1260,
  height = 1200;
  
  var fill = d3.scale.category10();
  
  var svg = d3.select("body").append("svg")
      .attr("width", width)
      .attr("height", height);
  
  d3.csv("data/Images.csv", function(error, data) {
  
      data.forEach(function(d) {
  
          arrFileUrl.push(d['FingerImageName']);
  
      });
  
      var nodes = d3.range(arrSize.length).map(function(i) {
        return {index: i};
      });
  
      var force = d3.layout.force()
      .nodes(nodes)
      .gravity(0.05)
      .charge(-1700)
      .friction(0.5)
      .size([width, height])
      .on("tick", tick)
      .start();
  
  
      var node = svg.selectAll(".node")
          .data(nodes)
          .enter().append("rect")
          .attr("class", "node")
          .attr("width", 120)
          .attr("height", 160)
          .style("fill", "#fff")
          .style("stroke", "black")
          .call(force.drag);
  
  
      node.append("image")
    .attr("xlink:href", "https://github.com/favicon.ico")
    .attr("x", 16)
    .attr("y", 16)
    .attr("width", 100)
    .attr("height", 120);
  
      svg.style("opacity", 1e-6)
        .transition()
          .duration(1000)
          .style("opacity", 1);
  
  
      function tick(e) {
  
        // Push different nodes in different directions for clustering.
        var k = 6 * e.alpha;
        nodes.forEach(function(o, i) {
          o.y += i &amp; 1 ? k : -k;
          o.x += i &amp; 2 ? k : -k;
        });
  
        node.attr("x", function(d) { return d.x; })
            .attr("y", function(d) { return d.y; });
      }
  
  });
  </code></pre>