Question

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

但是现在我正在努力在d3.js中创建2个svg。我希望在宽度为900的位置（0,0）上设置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的父容器中来解决这个问题。

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>

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

1 个答案: