How to create 2 svg's on one page?

Question

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!

Do you want two SVGs in one HTML page or two nested sibling SVGs within a parent SVG? — altocumulus, May 19 '17 at 13:27
That is a really good question. I can tell you, that i wish to interact with the elements on the 2 svg's. That means, when i click on an element from the first svg, then i should have an effect on the second svg. So what is the best solution for this case? — Hansi Schmidt, May 19 '17 at 13:38
Possible duplicate of [Display multiple d3.js charts in a single html page](http://stackoverflow.com/questions/41940439/display-multiple-d3-js-charts-in-a-single-html-page) — r3mainer, May 19 '17 at 13:39

Paul LeBeau · Accepted Answer · 2017-05-20T07:45:29.040

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>

Good answer, +1. I have a question about MDN docs: it says that SVGs are **inline** by default (and I put the same in [my answer here](http://stackoverflow.com/a/44080919/5768908)), and there is no `inline-block`. Which one is correct in your opinion? Is the MDN docs wrong? — Gerardo Furtado, May 20 '17 at 01:16
@GerardoFurtado I may have perhaps been overstating it to say that it is *actually* `display: inline-block`. However it is a [replaced element](https://developer.mozilla.org/en-US/docs/Web/CSS/Replaced_element), so it behaves like an inline-block. I think it's also fair to describe it as "inline", since it is not (by default) a [block element](https://developer.mozilla.org/en-US/docs/Web/HTML/Block-level_elements). — Paul LeBeau, May 20 '17 at 07:44

How to create 2 svg's on one page?

1 Answers1

Linked