如何用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是非常有益的