Javascript 如何在d3js中用背景图像填充六边形？

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

我想到了我需要用图像替换随机颜色，我读到我需要这样做：

 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中的模式，其他什么都看不到

---

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

我找到了一个六边形填充图像，以满足我的建议，所以我将接受我自己的答案。未来的解决方案可能会发布

请注意：在我的例子中，我只需要填充相对位于网格中心的8个六边形的图像，我不需要做任何计算，我只知道我有44个六边形，我需要填充网格中编号为20到27的路径。我的图像数据集包含8幅图像，我用它们为我需要填充的每个六边形创建了一系列图像图案

 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函数中，我为要填充的路径的几何体对象添加了填充属性，其他路径用白色填充

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中有任何空间

• 我必须提到，我是从这个开始的，这非常有帮助

---

您的代码没有运行……感谢您指出这一点，我更新了链接。然而，我已经找到了一个适合当前情况的解决方案。