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) + ")";
})

定位圆圈D3 / JS中的图像

1 个答案: