在D3图像图形

Question

我有保存图像文件名（JPG格式）和它们的2D与文件夹中的所有图像坐标一个JSON文件。如何在指定的坐标绘制2D平面上的这些图片？

Answer 1

让我们想象一下下面的JSON数组

[{
   x: 100,
   y: 100,
   url: 'https://i.stack.imgur.com/...'
}, {
   x: 110,
   y: 110,
   url: 'https://i.stack.imgur.com/...'
}, ...]

它是在D3上飞机很容易的地方图片：

let w = 450, h = 150;

let data = d3.range(10).map(i => {
  return {
    x: Math.random()*w,
    y: Math.random()*h,
    url: 'https://i.stack.imgur.com/EK1my.png?s=24&g=1'
}});

d3.select('body')
  .append('svg')
  .attr('width', w)
  .attr('height', h)
  .selectAll('image')
  .data( data )
  .enter()
  .append('image')
  .attr('xlink:href', d => d.url)
  .attr('x', d => d.x)
  .attr('y', d => d.y)

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>