javascript - 如何在一个 html 页面上应用两个 svg？-6ren

javascript - 如何在一个 html 页面上应用两个 svg？

转载作者：太空宇宙更新时间：2023-11-04 06:07:50

所以我有 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>