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

结果是作为类的结果，图像以给定的高度/宽度排列在行 block 中。我可以对 .css 或 JS 的这一部分做些什么来将它们定位成一个圆圈吗？谢谢，

Answer 1

据我所知，没有 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) + ")";
})