Как мне применить два svgs на одной html-странице? - PullRequest
Новая
       28

Как мне применить два svgs на одной html-странице?

0 голосов
/ 20 июня 2019

Итак, у меня есть 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>

Вот как это выглядит сейчас

Ответы [ 2 ]

1 голос
/ 20 июня 2019

Существует два типа основных элементов HTML - блочные и встроенные элементы.Блочные элементы (такие как div) будут перемещать элементы, которые следуют за ними, в следующую строку.Встроенные элементы (такие как span) не используют, вместо этого делятся строкой с содержимым, которое следует за ним, ЕСЛИ НЕ хватает места для них обоих.

Если вы хотите, чтобы элемент блока действительно вел себя как встроенный(в отношении разрывов строк) вы можете применить float: left к CSS этого элемента.

Редактировать: я бы сделал это, добавив класс с именем float-left в первый SVG, а затемизмените один из ваших <style> тегов, включив в него 

.float-left {
    float: left;
}

Это также позволит вам добавить класс float-left к любым другим элементам, для которых вы хотите применить это поведение.Надеюсь, это поможет.

0 голосов
/ 24 июня 2019

Используя ваш код в plnkr, я могу заставить их сидеть рядом друг с другом, просто установив ширину элементов на достаточно малые значения. Не помогает то, что вы определяете ширину по-разному для двух элементов (линейный график использует width, назначенный элементу HTML, а блочный график просто устанавливает свою собственную ширину на 460). Но если вы установите для каждого из них определенное, меньшее значение (например, 200), вы увидите, что они хорошо отображаются рядом друг с другом. 

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

Кроме того, по какой-то причине вы визуализируете два элемента svg с совершенно другим HTML (один находится в элементе svg, а другой - в span с id="svg2"), что не поможет , Сделайте ваш HTML согласованным, и вы получите гораздо больший контроль над тем, как он отображается, поскольку блоки будут обрабатываться одинаково по умолчанию.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...