如何在一个页面上创建2个svg？ [英] How to create 2 svg's on one page?

问题描述

我在这里已经问了一个类似的问题：
如何在svg中使用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）; 
  

但它确实没有用。有人可以帮忙吗？
非常感谢！

解决方案

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 >< /脚本>< DIV>< / DIV>  

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

有几种方法可以解决这个问题。一种方法是使SVG 显示：阻止，然后让它们 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;边框：实心1px绿色; overflow：auto;}  

 < script src =https ：//cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js>< /脚本>< DIV>< / DIV>  

I already asked a similiar question here: How to use a svg inside a svg?

But now i am struggling to create 2 svg's in d3.js on one page. I want to have a svg on position (0,0) with the width of 900. And the second svg should be a direct neighbor, starting at position 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);

But it doesn't really work out. Can someone help please? Thanks so much!

解决方案

The x and y attributes are only valid for an inner (nested) SVG. They have no effect on top level SVGs like this.

If you want to arrange the SVGs on your HTML page, you need to use CSS to do it.

By default SVGs are effectively display: inline-block, like <img> elements, so they will normally be arranged next to each other as if they were sitting on a baseline of a piece of text.

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>

If your SVGs are not next to one another, the probable reason is that your page is not wide enough and the second one is wrapping to the next line. You could fix that by putting them in a parent container that is wide enough to take both SVGs.

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>

You might now look at this and be wondering why the two SVGs are both at the bottom of the parent <div>. The reason goes back to what I said earlier about SVGs being inline-block and being positioned like they are on the baseline of some text.

There are a few ways you can fix that. One way would be to make the SVGs display: block instead, then have them 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？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！