定位圓圈D3 / JS中的圖像

Question

我有5個圖像，我附加到一個div，我想要圍成一個圓圈。 這是代碼的片段，它將5個圖像附加到感興趣的div：

diseases = ['d1', 'd2', 'd3']

images = d3.select('#welcome-container').selectAll('svg')
    .data(diseases).enter()
    .append('img')
    .attr('src', function(d) {return 'images/' + d + '_icon.png'})
    .attr('class', 'disease_icon')
    .attr('value', function(d) {return d})

結果是作為類的結果，以給定高度/寬度排列在行塊中的圖像。 我可以對.css或JS的這個部分做些什么來定位它們？ 謝謝，

Answer 1

AFAIK，沒有自動為您執行此操作的CSS。 手動對齊圖像並不太難 - 您可以根據其索引翻譯單個圖像，例如

.attr("transform", function(d, i) {
  return "translate(" + (Math.cos(2*Math.PI/diseases.length*i)*radius) +
         "," + (Math.sin(2*Math.PI/diseases.length*i)*radius) + ")";
})