Граф изображения в d3

Question

У меня есть файл JSON, который содержит имена файлов изображений (jpg) и их 2D-координаты со всеми изображениями в папке.Как мне построить эти изображения на 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>