title: SVG element from an array
body: <p>I am trying to load images into a svg canvas from an array and I am not able to make this code work. </p>
  
  <p>I am trying to debug it with Chrome and I am not able to. The image is blank and I don't know how to proceed. </p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
  &lt;script type="text/javascript" src="http://mbostock.github.com/d3/d3.js"&gt;&lt;/script&gt;
  &lt;style type="text/css"&gt;
  body {
                  background-image:url('BG.png')
       }
  &lt;/style&gt;
  &lt;title&gt;Drag And Drop&lt;/title&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;script type="text/javascript"&gt;
  
      window.onload = function(){
      var NumImages = [
                  { 'x' :200, 'y':90, 'width': 450, 'height':200, 'href' : 'numbers.jpeg'  },
  ];
  var circleData = [
     { "cx": 20, "cy": 20, "radius": 20, "color" : "green" },
     { "cx": 70, "cy": 70, "radius": 20, "color" : "purple" }];
  
  
   var rectangleData = [
     { "rx": 110, "ry": 110, "height": 30, "width": 30, "color" : "blue" },
     { "rx": 160, "ry": 160, "height": 30, "width": 30, "color" : "red" }];
  
      var svgContainer = d3.select("body").append("svg")
                                                  .attr("width",700)
                                                  .attr("height",700)
                                                  .attr("margin-top", 100);
  
  
      var images = svgContainer.selectAll("image")
          .data(NumImages)
          .enter()
          .append("image");
  
      svgContainer.append("image")
          .attr('x',200)
          .attr('y',90)
          .attr('width', 50)
          .attr('height', 200)    
          .attr("xlink:href", "2-image.jpg");
      };
  
  &lt;/script&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>