如何在一页上创建 2 个 svg？

Question

我已经在这里问过一个类似的问题： How to use a svg inside a svg?

但现在我正在努力在一页上在 d3.js 中创建 2 个 svg。我想在位置 (0,0) 上有一个宽度为 900 的 svg。第二个 svg 应该是直接邻居，从位置 x = 901 开始。

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

  var innerSVG = d3.select("body").append("svg")
      .attr("x", 901)
      .attr("y", 0)
      .attr('width',400)
      .attr('height',400);

但这并没有真正奏效。有人可以帮忙吗？ 非常感谢！

Answer 1

x 和 y 属性仅对内部（嵌套）SVG 有效。它们对像这样的顶级 SVG 没有影响。

如果你想在你的 HTML 页面上排列 SVG，你需要使用 CSS 来做。

默认情况下，SVG 实际上是display: inline-block，就像<img> 元素一样，所以它们通常会被排列在一起，就好像它们坐在一段文本的基线上一样。

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

  var innerSVG = d3.select("body").append("svg")
      .attr('width',400)
      .attr('height',400);
            

svg {
  border: solid 1px blue;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>

如果您的 SVG 不相邻，可能的原因是您的页面不够宽，而第二个 SVG 正在换行到下一行。您可以通过将它们放在足够宽以容纳两个 SVG 的父容器中来解决此问题。

var svg = d3.select("div").append("svg")
          .attr("width", 900)
          .attr("height", 900);

  var innerSVG = d3.select("div").append("svg")
      .attr('width',400)
      .attr('height',400);

svg {
  border: solid 1px blue;
}

div {
  width: 1305px;
  border: solid 1px green;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>

<div></div>

您现在可能会想知道为什么这两个 SVG 都位于父 <div> 的底部。原因可以追溯到我之前所说的关于 SVG 是 inline-block 并且被定位为就像它们位于某些文本的基线上一样。

有几种方法可以解决这个问题。一种方法是制作 SVG display: block，然后让它们 float: left。

var svg = d3.select("div").append("svg")
          .attr("width", 900)
          .attr("height", 900);

  var innerSVG = d3.select("div").append("svg")
      .attr('width',400)
      .attr('height',400);

svg {
  border: solid 1px blue;
  display: block;
}

svg:nth-child(1) {
  float: left;
}

div {
  width: 1305px;
  border: solid 1px green;
  overflow: auto;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>

<div></div>