将2个svg（情节和动画）定位在同一页面上 - D3js

Question

我正在使用d3js绘制图形，也可以在同一页面中绘制小动画（过渡）。到目前为止，我已经分别创建了情节和动画，并且很难将它们组合起来。

问题是我如何为动画和情节定义svg。

对于剧情：

  var margin = {top: 120, right: 20, bottom: 60, left: 80},
    width = 600 - margin.left - margin.right,
    height = 600 - margin.top - margin.bottom;

  var svg = d3.select("body").append("svg")
        .attr("width", width + margin.left + margin.right)
        .attr("height", height + margin.top + margin.bottom)
        .append("g")
        .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

对于动画：

var svg = d3.select("body").append("svg")
    .attr("width", 1200)
    .attr("height", 500);

我浏览了2 svg的定位并找到了this。但我的问题是如果我不给宽度为'1200'，我就无法定位原点和过渡我在页面右侧创建的正方形路径。

有人可以帮我把两者合并在一起。