D3.js，SVG-移动锚点

Question

我有一个包含机场坐标的airport.json文件，并希望通过以下功能在地图上的每个坐标处附加一个airport.svg图标：

function draw_airports() {

  d3.json('airports.json').then(function(airport_data) {
    var svg = d3
      .select('map_container')
      .append('svg')
      .attr('width', width)
      .attr('height', height);

    var g = svg.append('g');

    var img = g
        .selectAll('img')
        .data(airport_data)
        .enter()
        .append('svg:image')
        .attr('xlink:href', 'airport.svg')
        .attr('x', function(d) {
           return projection([d.lon, d.lat])[0];
        })
        .attr('y', function(d) {
           return projection([d.lon, d.lat])[1];
        })
        .attr('width', 8)
        .attr('height', 8);
  });

此代码将图标附加到地图上坐标的右侧和下方。如何将airport.svg的锚点（0,0）移到图标的中心？

[airport.svg的坐标空间：

Answer 1

添加一行：

。attr（'transform'，'translate（-4，-4）'）

将宽度/高度属性分配给图标后。 translation的x和y的值取决于图标的宽度和高度。应该是：

x = -width / 2，y = -height / 2。

让我们知道是否有帮助

Answer 2

为了能够更改正在移动的图像的中心，您应该使用transform-origin MDN，这样您就可以将图像的中心控制为原点或运动：

var img = g
  .selectAll('img')
  .data(airport_data)
  .enter()
  .append('svg:image')
  .attr('xlink:href', 'airport.svg')
  .attr('x', function(d) {
      return projection([d.lon, d.lat])[0];
  })
  .attr('y', function(d) {
      return projection([d.lon, d.lat])[1];
  })
  .attr('width', 8)
  .attr('height', 8)
  .style('style', 'transform-origin: center center');

由于无法测试，可能无法正常工作，在这种情况下，请尝试删除x，y坐标属性，并将其替换为：

.attr('transform', `translate(${projection([d.lon, d.lat])[0]}, ${projection([d.lon, d.lat])[1]})`)