如何用d3js中的背景图像填充六角形？

Question

我一直在试图按照不同的d3.js教程来创建我自己的六边形网格。

我已经拿出来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 
      }); 

我有40张图片数据阵列的数量半径为120的六角形形成的topoApi为40，我知道我需要设置一些如何以六角形为中心的图像，但使用上面的代码我只能看到生成的html中的图案，但没有其他东西

First我需要让图像显示在屏幕上，然后我应该对它们进行定位，请帮助

Answer 1

我已经找到了填充六角形的图像，这个图像符合我当时的建议，所以我将接受我自己的答案。未来的解决方案可能会发布。

请注意：在我的情况下，我只需要填充相对位于网格中心的8个六边形图像，我不需要做任何计算我只知道我有44个六边形，我需要填充网格编号从20到27的路径。我的图像数据集包含了我曾经创造了多个图像模式的每一个六边形我需要填写

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

在hexTopology函数创建六边形的几何形状，我添加填充属性为几何对象8张图片我想填补的路径中，其他路径充满了白色。

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 = ''; 
     } 
    }); 

然后我更新的样式为六边形的每个路径

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; 
     }); 

最后两点：

• 我不认为这个解决方案是最好的答案，因为我仍然有问题的8个图像模式，我需要他们来填补六角形，但我不希望他们在我的HTML有任何空间。

• 不得不提的是，我开始用这个tutorial这answer是非常有益的