javascript - 将图像定向成圆形 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) + ")";
})