title: How do I set an image as the background of a path in d3.js?
body: <p>First time using d3.js and am experimenting with using this example: <a href="http://bl.ocks.org/christophermanning/1734663" rel="nofollow">http://bl.ocks.org/christophermanning/1734663</a> in a site I'm making, but I want the fill of the shapes to be images instead of a purple color.</p>
  
  <p>I think the relevant code is inside the update function as follows:</p>
  
  <pre><code>    path = path.data(d3_geom_voronoi(vertices))
      path.enter().append("path")
          // drag node by dragging cell
          .call(d3.behavior.drag()
            .on("drag", function(d, i) {
                vertices[i] = {x: vertices[i].x + d3.event.dx, y: vertices[i].y + d3.event.dy}
            })
          )
          .style("fill", function(d, i) { return color(0) })
      path.attr("d", function(d) { return "M" + d.join("L") + "Z"; })
          .transition().duration(150).style("fill", function(d, i) { return color(d3.geom.polygon(d).area()) })
      path.exit().remove();
  </code></pre>
  
  <p>So first I comment out..</p>
  
  <pre><code>    .style("fill", function(d, i) { return color(d3.geom.polygon(d).area()) })
  </code></pre>
  
  <p>..so my image fill wont be overwritten on update, and then I need to replace..</p>
  
  <pre><code>    .style("fill", function(d, i) { return color(0) })
  </code></pre>
  
  <p>..with "something", but before I replace it I define the image by adding..</p>
  
  <pre><code>var image = svg.append("image")
    .attr("xlink:href", "http://lorempixel.com/g/400/400/")
    .attr("x", 0)
    .attr("y", 0)
    .attr("width", 400)
    .attr("height", 400)
    .attr("id", "fillImage");
  </code></pre>
  
  <p>..before the update function, and then I've tried replacing the fill code with stuff like:</p>
  
  <pre><code>  .style("fill", function(d, i) { return "url('#fillImage')" })
  </code></pre>
  
  <p>or</p>
  
  <pre><code>  .style("fill", function(d, i) { return "url(#fillImage)" })
  </code></pre>
  
  <p>or</p>
  
  <pre><code>  .style("fill", "url('#fillImage')")
  </code></pre>
  
  <p>or</p>
  
  <pre><code>  .style("fill", "url(#fillImage)")
  </code></pre>
  
  <p>or all the same except using "attr" instead of "style", as well as not using an id but the image varible, so: image, image[0], image[0][0], image[0][0].outerHTML. But nothing seems to work, so any ideas?</p>