javascript - 如何在 svg 中使用 svg？

Question

我正在使用 D3.js 并尝试在 svg 中创建一个 svg。 例如我的第一个 svg 是这样的:

  var svg = d3.selectAll('body')
      .append('svg')
      .attr('width',500)
      .attr('height',500);

然后我想在第一个 svg 中创建第二个 svg，我希望它出现在我的第一个 svg 的右上角。这怎么可能？我想到了第二个 svg 的 width = 100 和 height = 100 的属性。这个问题的原因是，我在 D3.js 中使用力布局，它可能非常大，具体取决于数据输入。所以我想将图形本身放在第一个大 svg 中，将其他信息(如文本)放在较小的第二个 svg 中。如果带有 div 元素的解决方案可能更好，请告诉我。

Answer 1

只需在第一个中附加另一个 SVG。

  var svg = d3.selectAll('body')
      .append('svg')
      .attr('width',500)
      .attr('height',500);

  var innerSVG = svg.append('svg')
      .attr('width',100)
      .attr('height',100);