如何在一个 html 页面上应用两个 svg？答案

【问题标题】：How do I apply two svgs on one html page?如何在一个 html 页面上应用两个 svg？
【发布时间】：2019-06-20 19:50:02
【问题描述】：

所以我有 2 个图表：折线图和箱线图，但我想要折线图旁边的箱线图，但它位于下方。如何使它位于折线图旁边？任何想法都值得赞赏。谢谢！

我尝试使用 2 个不同的 SVG，但没有成功。这是我的代码：http://next.plnkr.co/edit/mWGOEy0GHp1olZgNgtpA?preview

<!DOCTYPE html>
<meta charset="utf-8">
<style>

.line {
    fill: none;                 
  stroke: url(#grad);    
  stroke-width: 2px; 
}
.zoom {
  cursor: move;
  fill: none;
  pointer-events: all;
}

</style>
<svg width="900" height="700">  
</svg>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script>

var svg = d3.select("svg"),
    margin = {top: 90, right: 50, bottom: 100, left: 40},
    margin2 = {top: 630, right: 50, bottom: 30, left: 40},
    width = +svg.attr("width") - margin.left - margin.right,
    height = +svg.attr("height") - margin.top - margin.bottom,
    height2 = +svg.attr("height") - margin2.top - margin2.bottom;

...more code 
</script>

//end of line graph 

//beginning of boxplot
<!-- Load d3.js -->
<script src="https://d3js.org/d3.v4.js"></script>

<!-- Create a div where the graph will take place -->
<div id="svg2"></div>

<!-- To use the monochrome scale -->
<script src="https://d3js.org/d3-scale-chromatic.v1.min.js"></script>

<!-- Tooltip style -->
<style>
.tooltip {
  background-color: black;
  border: 1px black solid;
  display: inline-block;
  border-radius: 5px;
  padding: 15px;
  min-width: 1000px;
  text-align: left;
  color: white;  
}
</style>

<script>
// set the dimensions and margins of the graph
var margin = {top: 70, right: 30, bottom: 50, left: 80},
    width = 460 - margin.left - margin.right,
    height = 400 - margin.top - margin.bottom;

...more code, end of boxplot
</script>

This is what it looks like right now

【问题讨论】：

标签： javascript html css d3.js svg

【解决方案1】：

有两种类型的基本 HTML 元素 - 块元素和内联元素。块元素（例如 div 的）会将跟随它们的元素向下推到下一行。内联元素（例如 span 的）不会，而是与其后的内容共享一行，除非没有足够的空间容纳它们。

如果您希望块元素实际上表现得像内联（就换行而言），您可以将float: left 应用于该元素的 CSS。

编辑：我这样做的方法是在第一个 SVG 上添加一个名为 float-left 的类，然后修改您的一个 <style> 标签以包含

.float-left {
    float: left;
}

这也将允许您将float-left 类添加到您想要执行此行为的任何其他元素。我希望这会有所帮助。

【讨论】：

我刚刚修改了我的答案，希望能更好地解释一下
如何在第一个 SVG 上添加一个名为 float-left 的类？
如果您的 SVG 太大，它们会自动将过大的 SVG 移动到另一行。默认情况下，SVG 似乎是一个内联元素，所以默认情况下它们应该在同一行。你可以在这里看到它：plnkr.co/edit/LEQqBYrUGhb131XHb8aM?p=preview
嗯还是没用。如果这对您有更好的帮助，我已经在上面添加了我的 plunker 代码。我需要删除一些东西吗？

【解决方案2】：

使用您在 plnkr 的代码，我只需将元素的宽度设置为足够小的值，就可以让它们并排放置。为两个元素定义不同的宽度并没有帮助（折线图使用分配给 HTML 元素的width，而箱线图只是将其自己的宽度设置为 460）。但是，如果您将每个设置为一个特定的、较小的值（例如最初的 200），您会看到它们很好地并排显示。

<svg width="200" height="700">  
.
.
.
<!-- BOXPLOT -->
.
.
.
var margin = {top: 70, right: 30, bottom: 50, left: 100},
    width = 200 - margin.left - margin.right,

另外，由于某种原因，您正在使用完全不同的 HTML 渲染两个 svg 元素（一个在 svg 元素中，另一个在 span 和 id="svg2" 中），这无济于事.使您的 HTML 保持一致，您将可以更好地控制它的呈现方式，因为默认情况下块将被以相同的方式处理。

【讨论】：

好的，所以我得到了彼此相邻的图表（请参阅上面更新的 plunkr），但是我的折线图上的 x 轴位于一个奇怪的位置。我的箱线图工具提示也不在它下面。我将如何解决这个问题？谢谢！
为了让两个图表按照你的需要对齐，我只需要使用普通的 CSS 格式。同样对于工具提示，您已经定义了一个 .tooltip 类，所以我会使用它 - 您可能需要 position:absolute; 让您根据需要定位它。
@pk1997 我看到你提出了一个单独的问题，即基于同一个示例的图表之间的交互。如果这个答案已经解决了最初的问题，如果你能接受它会很棒。