将图像定向成圆形 D3/JS答案

【问题标题】：Orient Images in a Circle D3/JS将图像定向成圆形 D3/JS
【发布时间】：2012-06-13 01:49:15
【问题描述】：

我有 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 的这一部分做些什么来将它们定向成一个圆圈吗？谢谢，

【问题讨论】：

标签： javascript image orientation d3.js geometry

【解决方案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) + ")";
})

【讨论】：

非常感谢您的代码。我的 svg 元素现在有一个属性“transform=translate(100,50)”，但 svg 位于页面上的相同位置。有什么我缺少的东西来实际移动它们吗？谢谢，
啊，我稍微误读了您的示例——如果您使用的是单个 SVG，则不能使用 transform 属性。最简单的方法可能是将<img>s 放入<div>s 并使用CSS 移动它们。原理是一样的，只不过不是“translate(...)”，而是生成类似“left: ...; bottom: ...;”的东西。
非常感谢 - 我已经通过将 img 元素附加到 svg 来使其工作。唯一的问题是，上面的等式导致 5 张图像大约是半圆。你可以更新方程来渲染一个完整的圆圈（ish）吗？我的几何技能没有达到标准。非常感谢，
显然我的几何技能也有点生疏了 :) 我已经更新了答案——Math.PI 应该是 2*Math.PI。
完美运行！非常感谢。