javascript - how to fill hexagon with background image in d3js? -

i have been trying follow different d3.js tutorials create own hexagon mesh.

i have come this need replace random colors images, read need this:

 var imagepatterns = svg.selectall('pattern').data(data).              enter().append('pattern')              .attr('x',50)              .attr('y',50)              .attr('width',1)              .attr('height',1)              .append('image').attr("xlink:href", function(d,i){                  return data[i].img;              })             .attr("x", function(d,i){                  return i+100;              })             .attr("y", function(d,i){                  return i+200;              })             .attr("width", 230)             .attr("height", 230)             .attr("id", function(d,i){                  return 'fillimage'+i              }); 

i have data array 40 images, number of hexagon of radius 120 form topoapi 40 , know need set image how center of each hexagon, above code see patterns in generated html nothing else

first thing need images show on screen should work on positioning them, please help

i've found away fill hexagon image serves propose time, going accept own answer.future solutions may posted.

please note: in case needed fill images 8 hexagons relatively located in center of mesh, didnt need calculations figured out have 44 hexagons , needed fill paths numbered 20 27 of mesh. images data set contains 8 images used create number of images pattern every hexagon need fill

 var imagepatterns = d3.select("#imagescontainer").append('svg').selectall('pattern')         .data(data)         .enter().append('defs').append('pattern')         .attr('id', function (d, i) {             return 'fillimage' + (19 + i);         })         .attr('patternunits', 'userspaceonuse')         .attr('width', 190)         .attr('height', 270)         .append('image').attr("xlink:href", function (d, i) {     return d; }).attr("x", 0)         .attr("y", 0)         .attr("width", imagewidth)         .attr("height", imageheight); 

in hextopology function creates hexagon geometries added fill property geometry objects of paths wanted fill, other paths filled white color.

var hexagonpaths = [20, 21, 22, 23, 24, 25, 26, 27];      geometries.foreach(function (obj, ind) {         if (hexagonpaths.indexof(ind) > -1)         {                 geometries[ind].fill = "url(#fillimage" + ind + ")";                 geometries[ind].text = 'my text';          }         else         {             geometries[ind].fill ='#fff';             geometries[ind].text = '';         }     }); 

then updated style each path of hexagons

svg.append("g")         .attr("class", "hexagon")         .selectall("path")         .data(topology.objects.hexagons.geometries)         .enter().append("path")         .attr("d", function (d) {             return path(topojson.feature(topology, d));         }).style('fill', function (d, i) {             return d.fill;          }); 

two last points:

• i dont think solution best answer cause still have issue of 8 image patterns needed them fill hexagons dont want them have space in html.

• i must mention started tutorial , answer helpful