Почему добавленный svg не расположен в 0,0?

Question

У меня есть шкала, созданная с помощью D3, а затем я извлекаю svg-спрайт, используя d3.xml. Почему спрайт не находится в верхнем левом углу svg перед переводом? Есть ли способ обеспечить добавление спрайта точно в левом верхнем углу SVG?

d3.csv('planets.csv').then(function(data){

  var margin = {   top: window.innerHeight * 0.3,   left: 170,   bottom: window.innerHeight * 0.3,   right: 50 };
  var height = (window.innerHeight - margin.top - margin.bottom)*0.5;
  var chartWidth = window.innerWidth - margin.left - margin.right;
  var maxDist = d3.max(data, function(d) { return d.distance; });
  var xScale = d3.scaleLinear().domain([0, maxDist]).range([0, chartWidth]);

  var xAxisTop = d3.axisTop(xScale);
    var svg = d3.select('#vis')
                .append('svg')
                .attr('width', chartWidth + margin.left + margin.right)
                .attr('height', height + margin.top + margin.bottom)
                .append('g')
                .attr('class', 'chart')
                .attr('transform', 'translate(' + margin.left + ', '+ margin.top +  ')');
      var xAxisDrawTop = svg.insert('g',':first-child')
                               .attr('class','x_axis_top')
                               .call(xAxisTop);

var xAxisDrawTopTorchContainer = d3.select('.x_axis_top').append('g').attr('class','rocket_container')

d3.xml('torch.svg').then(torch=>{

  torchSprite = torch.documentElement;
    xAxisDrawTopTorchContainer.node().append(torchSprite);
  })

Answer 1

Решением было избежать создания фрагмента документа с помощью:

 d3.select('relevant-g element').append('image').attr('type','image/svg+xml').attr('xlink:href','torch.svg');

, это гарантирует, что добавленный спрайт сопоставляется с координатами 0,0 существующего SVG в DOM.