javascript - 如何在一页上创建 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>