У меня есть контейнер для моей диаграммы Санки (работает на d3). У него есть кнопка в левом верхнем углу. Чего я хотел бы добиться, так это чтобы мой Sankey взял 100% - отступ по ширине и 90% - заполнение по высоте, будучи привязанным к основанию. Правильно растягиваться на контентной странице. Прямо сейчас мой Санки не заполняется правильно.
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
/* Main */
#wrapper {
max-width: 100%;
max-height: 100%;
}
/* Sidebar */
#sidebar-wrapper {
z-index: 1;
position: absolute;
background-image: linear-gradient(45deg, blue, #0000a0);
width: 0;
height: 100%;
overflow-y: hidden;
box-shadow:3px 0px 12px 2px;
transition: 0.4s;
}
/* Main content */
#page-content-wrapper {
max-width: 100%;
max-height: 100%;
}
.row {
background-color: white;
}
#page-content-wrapper .col-lg-12 {
border-radius: 10px;
width: 100%;
height: 100%;
background-color: gainsboro;
position: absolute;
margin: 10px;
padding: 15px;
border: 3px solid gray;
max-width: 90%;
max-height: 90%;
display: flex;
flex-direction: column;
height: 100%;
position: relative;
}
.btn .btn-success {
position: absolute;
top: 1%;
left: 1%;
}
svg#sankey {
position: relative;
display: block;
transform: rotate(90deg);
}
/* Business Bar */
.businesses-wrapper {
display:none;
}
.businesses-wrapper.menuDisplayed {
display: block;
position: absolute;
left:21%;
height: 100%;
background-image: linear-gradient(45deg, red, orange);
width: 21%;
}
.businesses-wrapper.menuDisplayed #title {
padding: 15px;
color:rgba(0, 0, 160, 1);
background-color: rgba(0, 215, 185, 1);
text-align: center;
font-weight: 400;
font-size: 14px;
white-space: nowrap;
width: 100%
}
/* Change the width of the sidebar to display it*/
#wrapper.menuDisplayed #sidebar-wrapper{
width: 21%;
}
#wrapper.menuDisplayed #page-content-wrapper{
padding-left: 21%;
}
/* Sidebar styling */
.sidebar-nav {
padding: 0;
list-style: none;
}
.sidebar-nav li{
text-indent: 20px;
line-height: 40px;
}
.sidebar-nav li a {
display: block;
text-decoration: none;
color: white;
stroke: white;
-webkit-box-shadow:1px 1px 1px rgba(255, 255, 255, 0.3);
-moz-box-shadow:1px 1px 1px rgba(255, 255, 255, 0.3);
box-shadow: 0px -1px 2px 0px rgba(255, 255, 255, 0.5);
white-space: nowrap;
}
.sidebar-nav li a:hover{
background: #8080cf;
font-weight: 600;
}
#last {
width: 100%;
height: 1px;
-webkit-box-shadow:0px 2px 0px 0px rgba(255, 255, 255, 0.3);
-moz-box-shadow: 0px 2px 0px 0px rgba(255, 255, 255, 0.3);
box-shadow: 0px 2px 1px 0px rgba(255, 255, 255, 0.5);
}
/* nav-bar header */
.header-bar-wrapper {
padding: 15px;
color:rgba(0, 0, 160, 1);
background-color: rgba(0, 215, 185, 1);
text-align: center;
font-weight: 400;
font-size: 14px;
white-space: nowrap;
}
/* Counts */
.count-wrapper {
margin-bottom: 15px;
position: relative;
white-space: nowrap;
}
#outer-ring {
height: 150px;
width: 150px;
display: block;
margin: auto;
margin-top: 10px;
margin-bottom: 10px;
stroke: white!important;
color: white!important;
-webkit-animation: clockwiseSpin 36s infinite linear;
white-space: nowrap;
}
@-webkit-keyframes clockwiseSpin {
from {
-webkit-transform: rotate(0deg);
}
to {
-webkit-transform: rotate(359deg);
}
}
#outer-ring ellipse {
fill: white;
rx: 1.5px;
ry: 1.5px;
white-space: nowrap;
}
#inner-ring {
height: 124px;
width: 124px;
position: absolute;
display: block;
fill: white;
stroke: none;
margin: auto;
margin-top: 10px;
top: 2.5px;
left: 0;
right: 0;
text-align: center;
-webkit-animation: antiClockwiseSpin 28s infinite linear;
white-space: nowrap;
}
@-webkit-keyframes antiClockwiseSpin {
from {
-webkit-transform: rotate(359deg);
}
to {
-webkit-transform: rotate(0deg);
}
}
#innermost-circle {
position: absolute;
display: block;
fill: rgba(0, 215, 185, 1);
height: 120px;
width: 120px;
opacity: 0.7;
left: 0;
right: 0;
margin: auto;
text-align: center;
margin-top: 10px;
top: 4.5px;
white-space: nowrap;
}
#vis-logo {
position: absolute;
display: block;
fill: rgba(255, 255, 255, 1);
height: 70px;
width: 70px;
left: 0;
right: -5px;
margin: auto;
text-align: center;
margin-top: 10px;
top: 32px;
white-space: nowrap;
}
#count {
position: absolute;
text-align: center;
margin: 0;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
display: grid;
white-space: nowrap;
}
#count span {
color: white;
display: inline-block;
opacity: 1;
line-height: 1;
}
#count span#text {
font-weight: 600;
}
#logo {
height: 50px;
width: 50px;
position: absolute;
text-align: center;
margin: 0;
position: absolute;
bottom: 5%;
left: 50%;
transform: translate(-50%, -50%);
}
#logos {
height: 20px;
width: 20px;
fill: yellow;
}
#logos g, path {
stroke: white;
fill: white;
}
#logos g path {
stroke: white;
fill: white!important;
}
a span {
margin-left: 15px;
}
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link rel="stylesheet" href="{{ url_for('static', filename='css/main.css') }}">
<script src="https://code.jquery.com/jquery-3.4.1.js" integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.15.1/d3.min.js"></script>
</head>
<body>
<div id="wrapper">
<!-- Sidebar -->
<div id="sidebar-wrapper">
<div class="header-bar-wrapper">
<span>Pet Owner Visualisation</span>
</div>
<div class="count-wrapper">
<svg id='inner-ring' xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" x="0px" y="0px" viewBox="0 0 50 50" enable-background="new 0 0 50 50" xml:space="preserve"><path d="M25.025,49.625c-0.276,0-0.5-0.224-0.5-0.5c0-0.275,0.224-0.5,0.5-0.5c4.151-0.004,8.232-1.1,11.803-3.169 c0.236-0.139,0.544-0.06,0.684,0.182c0.139,0.239,0.057,0.545-0.182,0.684C33.606,48.479,29.353,49.621,25.025,49.625L25.025,49.625 z M12.964,46.413c-0.085,0-0.17-0.021-0.25-0.066c-3.737-2.156-6.856-5.267-9.022-8.996c-0.139-0.238-0.057-0.545,0.182-0.684 c0.241-0.138,0.545-0.057,0.684,0.182c2.078,3.578,5.071,6.563,8.657,8.631c0.239,0.139,0.321,0.444,0.183,0.684 C13.305,46.323,13.137,46.413,12.964,46.413z M45.901,37.558c-0.085,0-0.171-0.021-0.25-0.067c-0.239-0.138-0.321-0.443-0.183-0.683 c2.064-3.573,3.156-7.656,3.156-11.808l-0.001-0.101c0-0.276,0.224-0.5,0.5-0.5s0.5,0.224,0.5,0.5l0.001,0.086 c0,4.342-1.138,8.598-3.291,12.322C46.241,37.468,46.073,37.558,45.901,37.558z M0.875,25.525c-0.276,0-0.5-0.198-0.5-0.475h0.5 l-0.5-0.022c-0.001-4.337,1.128-8.578,3.265-12.292c0.139-0.239,0.444-0.321,0.683-0.184c0.239,0.138,0.322,0.443,0.184,0.683 C2.458,16.798,1.375,20.866,1.375,25C1.375,25.276,1.152,25.525,0.875,25.525z M45.851,13.356c-0.172,0-0.339-0.089-0.432-0.248 c-2.087-3.575-5.088-6.553-8.677-8.613c-0.239-0.137-0.322-0.443-0.185-0.683c0.138-0.24,0.441-0.321,0.683-0.185 c3.74,2.146,6.867,5.25,9.042,8.976c0.14,0.238,0.059,0.544-0.18,0.684C46.023,13.334,45.937,13.356,45.851,13.356z M12.878,4.637 c-0.172,0-0.34-0.089-0.433-0.249c-0.139-0.238-0.058-0.544,0.181-0.684c3.718-2.165,7.97-3.316,12.296-3.33c0,0,0.001,0,0.001,0 c0.275,0,0.499,0.223,0.5,0.499s-0.222,0.5-0.499,0.501c-4.15,0.013-8.229,1.117-11.796,3.194 C13.05,4.615,12.964,4.637,12.878,4.637z"></path></svg>
<svg id='outer-ring' xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:cc="http://creativecommons.org/ns#" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" viewBox="0 0 100 100" version="1.1" x="0px" y="0px"><title>PDP-Icon-Circle</title><g transform="translate(0,-270.54167)"><ellipse style="" cx="95.109993" cy="321.81519" rx="2.3900082" ry="2.3907633" fill="#000000" fill-opacity="1" stroke="none"></ellipse><ellipse style="" cx="94.051575" cy="330.34082" rx="2.3900082" ry="2.3907633" fill="#000000" fill-opacity="1" stroke="none"></ellipse><ellipse style="" cx="91.393639" cy="338.5105" rx="2.3900082" ry="2.3907633" fill="#000000" fill-opacity="1" stroke="none"></ellipse><ellipse style="" cx="87.228989" cy="346.02518" rx="2.3900082" ry="2.3907633" fill="#000000" fill-opacity="1" stroke="none"></ellipse><ellipse style="" cx="81.718971" cy="352.61722" rx="2.3900082" ry="2.3907633" fill="#000000" fill-opacity="1" stroke="none"></ellipse><ellipse style="" cx="75.066666" cy="358.05396" rx="2.3900082" ry="2.3907633" fill="#000000" fill-opacity="1" stroke="none"></ellipse><ellipse style="" cx="67.507515" cy="362.13641" rx="2.3900082" ry="2.3907633" fill="#000000" fill-opacity="1" stroke="none"></ellipse><ellipse style="" cx="59.307789" cy="364.69803" rx="2.3900082" ry="2.3907633" fill="#000000" fill-opacity="1" stroke="none"></ellipse><ellipse style="" cx="50.771435" cy="365.65091" rx="2.3900082" ry="2.3907633" fill="#000000" fill-opacity="1" stroke="none"></ellipse><ellipse style="" cx="42.207973" cy="364.99423" rx="2.3900082" ry="2.3907633" fill="#000000" fill-opacity="1" stroke="none"></ellipse><ellipse style="" cx="33.923241" cy="362.72937" rx="2.3900082" ry="2.3907633" fill="#000000" fill-opacity="1" stroke="none"></ellipse><ellipse style="" cx="26.221169" cy="358.92639" rx="2.3900082" ry="2.3907633" fill="#000000" fill-opacity="1" stroke="none"></ellipse><ellipse style="" cx="19.378035" cy="353.7327" rx="2.3900082" ry="2.3907633" fill="#000000" fill-opacity="1" stroke="none"></ellipse><ellipse style="" cx="13.634921" cy="347.34256" rx="2.3900082" ry="2.3907633" fill="#000000" fill-opacity="1" stroke="none"></ellipse><ellipse style="" cx="9.1994591" cy="339.98349" rx="2.3900082" ry="2.3907633" fill="#000000" fill-opacity="1" stroke="none"></ellipse><ellipse style="" cx="6.2463722" cy="331.91412" rx="2.3900082" ry="2.3907633" fill="#000000" fill-opacity="1" stroke="none"></ellipse><ellipse style="" cx="4.890008" cy="323.4296" rx="2.3900082" ry="2.3907633" fill="#000000" fill-opacity="1" stroke="none"></ellipse><ellipse style="" cx="5.1496711" cy="314.8421" rx="2.3900082" ry="2.3907633" fill="#000000" fill-opacity="1" stroke="none"></ellipse><ellipse style="" cx="7.0256963" cy="306.45844" rx="2.3900082" ry="2.3907633" fill="#000000" fill-opacity="1" stroke="none"></ellipse><ellipse style="" cx="10.453431" cy="298.58093" rx="2.3900082" ry="2.3907633" fill="#000000" fill-opacity="1" stroke="none"></ellipse><ellipse style="" cx="15.308842" cy="291.49374" rx="2.3900082" ry="2.3907633" fill="#000000" fill-opacity="1" stroke="none"></ellipse><ellipse style="" cx="21.415846" cy="285.4509" rx="2.3900082" ry="2.3907633" fill="#000000" fill-opacity="1" stroke="none"></ellipse><ellipse style="" cx="28.560387" cy="280.67938" rx="2.3900082" ry="2.3907633" fill="#000000" fill-opacity="1" stroke="none"></ellipse><ellipse style="" cx="36.479439" cy="277.35001" rx="2.3900082" ry="2.3907633" fill="#000000" fill-opacity="1" stroke="none"></ellipse><ellipse style="" cx="44.884468" cy="275.57993" rx="2.3900082" ry="2.3907633" fill="#000000" fill-opacity="1" stroke="none"></ellipse><ellipse style="" cx="53.471874" cy="275.43243" rx="2.3900082" ry="2.3907633" fill="#000000" fill-opacity="1" stroke="none"></ellipse><ellipse style="" cx="61.932163" cy="276.91086" rx="2.3900082" ry="2.3907633" fill="#000000" fill-opacity="1" stroke="none"></ellipse><ellipse style="" cx="69.96019" cy="279.96378" rx="2.3900082" ry="2.3907633" fill="#000000" fill-opacity="1" stroke="none"></ellipse><ellipse style="" cx="77.266365" cy="284.48059" rx="2.3900082" ry="2.3907633" fill="#000000" fill-opacity="1" stroke="none"></ellipse><ellipse style="" cx="83.588326" cy="290.29752" rx="2.3900082" ry="2.3907633" fill="#000000" fill-opacity="1" stroke="none"></ellipse><ellipse style="" cx="88.693733" cy="297.20853" rx="2.3900082" ry="2.3907633" fill="#000000" fill-opacity="1" stroke="none"></ellipse><ellipse style="" cx="92.39238" cy="304.96426" rx="2.3900082" ry="2.3907633" fill="#000000" fill-opacity="1" stroke="none"></ellipse><ellipse style="" cx="94.557289" cy="313.27911" rx="2.3900082" ry="2.3907633" fill="#000000" fill-opacity="1" stroke="none"></ellipse></g></svg>
<svg id='innermost-circle' xmlns="http://www.w3.org/2000/svg" data-name="Layer 21" viewBox="0 0 32 32" x="0px" y="0px"><title>Circle</title><circle cx="16" cy="16" r="14.5"></circle></svg>
<svg id='vis-logo' height='100px' width='100px' fill="#000000" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" x="0px" y="0px" viewBox="0 0 100 100" style="enable-background:new 0 0 100 100;" xml:space="preserve"><g><path d="M34.777,14.713c0-5.6,4.54-10.139,10.139-10.139c5.599,0,10.138,4.539,10.138,10.139s-4.54,10.138-10.138,10.138 C39.317,24.851,34.777,20.313,34.777,14.713z M70.98,51.486l-5.762-11.87c-3.732-7.721-6.25-13.021-13.685-13.021H38.298 c-7.436,0-9.952,5.3-13.686,13.021l-6.851,14.117c-1.018,2.084-0.146,4.585,1.938,5.602c2.083,1.018,4.608,0.153,5.625-1.931 l9.474-18.298l-6.923,34.396h6.923v17.366c0,2.517,2.04,4.558,4.557,4.558s4.557-2.041,4.557-4.558V73.502h2.007v17.366 c0,2.517,2.041,4.558,4.558,4.558s4.557-2.041,4.557-4.558V73.502h6.923l-6.923-34.396c0,0,9.632,18.593,9.722,18.731 C66.166,54.656,69.144,52.146,70.98,51.486z M84.321,89.862V71.273c-2.124,2.372-6.327,2.451-6.327,2.451s-4.201-0.079-6.326-2.451 v18.589c0,0-2.723,0.236-2.723,2.959c0,1.257,1.35,2.604,2.975,2.604c3.373,0,5.193-1.303,5.193-3.592s0-8.915,0-8.915 c0.025-0.394,0.191-0.841,0.891-0.841c0.666,0,0.837,0.479,0.872,0.808c0,0,0,6.604,0,8.948s1.82,3.592,5.193,3.592 c1.625,0,2.974-1.348,2.974-2.604C87.043,90.099,84.321,89.862,84.321,89.862z M70.041,89.4c0,0,0-11.238,0-11.244 c-11.454-4.287-4.538,11.706-4.538,11.706s-2.723,0.236-2.723,2.959c0,1.258,1.351,2.604,2.975,2.604 c1.332,0,2.345-0.615,2.345-0.615C65.957,91.235,69.26,89.4,70.041,89.4z M91.518,87.026c-0.517,1.645-1.031,2.836-1.031,2.836 s2.723,0.236,2.723,2.959c0,1.258-1.35,2.604-2.975,2.604c-1.332,0-2.345-0.615-2.345-0.615c2.144-3.575-1.159-5.41-1.941-5.41 c0,0-0.001-11.238,0.001-11.244c4.693-1.757,6.301-0.107,6.564,2.451C98.349,82.25,100,77.426,100,77.426 C99.577,84.504,92.601,86.724,91.518,87.026z M68.994,62.844c0.846-1.813,2.851-5.826,3.793-5.378c0,0-3.102,6.471-3.102,7.292 c0,0.811,0.307,2.631,1.455,4.304c1.041,1.519,3.075,3.327,6.854,3.327c6.898,0,8.309-6.02,8.309-7.631 c0-0.77-3.117-7.285-3.117-7.285c0.936-0.508,2.96,3.547,3.813,5.371c0.883,1.893,3.531,2.901,3.531-1.45 c0-4.242-4.667-8.262-6.307-8.515c-1.211-0.186-2.213,0.868-2.602,1.377c-0.986-0.432-2.187-0.644-3.637-0.644 c-1.457,0-2.662,0.214-3.652,0.648c-0.4-0.524-1.373-1.565-2.563-1.382c-1.64,0.253-6.308,4.272-6.308,8.515 C65.461,65.745,68.111,64.736,68.994,62.844z M26.958,94.582c0,0,0.235,0.557,1.041,0.557c1.473,0,2.287-1.221,2.287-2.362 c0-2.469-2.47-2.683-2.47-2.683s7.772-14.509-2.616-10.619c-0.002,0.006-0.002,10.199-0.002,10.199 C25.905,89.674,28.903,91.338,26.958,94.582z M1.023,66.094c3.537,1.004,2.444,4.575,1.383,7.111 c-1.613,3.862-1.743,6.973-0.388,9.242c1.052,1.761,2.726,2.523,3.813,2.845c0.827,2.514,2.053,4.802,2.053,4.802 s-2.47,0.214-2.47,2.683c0,1.142,0.813,2.362,2.288,2.362c0.804,0,1.041-0.557,1.041-0.557c-1.945-3.244,1.05-4.908,1.76-4.908 c0,0,0-10.193-0.002-10.199c-4.223-1.581-5.446-0.12-5.408,2.17c-1.813-1.368-1.227-4.485-0.038-7.333 c1.423-3.403,1.673-5.991,0.764-7.914c-0.691-1.459-1.989-2.458-3.972-3.053c-0.759-0.227-1.557,0.204-1.785,0.964 C-0.167,65.066,0.262,65.878,1.023,66.094z M9.354,92.981c0,1.179,1.267,2.444,2.792,2.444c3.167,0,4.876-1.171,4.876-3.371 c0-0.938,0-2.6,0-4.198c-1.701-0.364-2.977-1.875-2.977-3.685c0.209,1.882,1.829,2.926,3.769,2.926 c1.938,0,3.557-1.044,3.766-2.926c0,1.785-1.239,3.277-2.903,3.667c0,1.612,0,3.29,0,4.216c0,2.148,1.708,3.371,4.876,3.371 c1.526,0,2.792-1.266,2.792-2.444c0-2.558-2.555-2.78-2.555-2.78V77.012c0,0-1.637,2.056-5.939,2.056 c-4.304,0-5.941-2.056-5.941-2.056v13.189C11.91,90.201,9.354,90.424,9.354,92.981z M10.325,69.247 c-0.219,0.605-0.337,1.248-0.337,1.911c0,3.656,3.561,6.62,7.956,6.62c4.393,0,7.955-2.964,7.955-6.62 c0-0.663-0.12-1.306-0.338-1.911c0.432-1.37,0.93-4.323-0.997-7.969l-3.717,3.716c-0.899-0.294-4.908-0.294-5.809,0l-3.716-3.716 C9.395,64.924,9.894,67.877,10.325,69.247z"></path></g></svg>
<div id="count" style='display: none'>
<span id='text'>Connections:</span>
<span>17,000,345</span>
</div>
</div>
<ul class="sidebar-nav">
<div id='last'></div>
</ul>
<div class="logo-box">
<img id=logo src="static/img/M.png" alt="">
</div>
</div>
<!-- Page Content -->
<div id="page-content-wrapper">
<div class="container-fluid">
<div class="row">
<div class='col-lg-12'>
<a href="#" class="btn btn-success" id="menu-toggle">Toggle Sidebar</a>
</div>
</div>
</div>
</div>
<div class="businesses-wrapper">
<ul class="sidebar-business-nav">
<div id='title'>Businesses</div>
<li><a href="#"><span>Business A</span></a></li>
<li><a href="#"><span>Business B</span></a></li>
<li><a href="#"><span>Business C</span></a></li>
<li><a href="#"><span>Business D</span></a></li>
<li><a href="#"><span>Business E</span></a></li>
<li><a href="#"><span>Business F</span></a></li>
<li><a href="#"><span>Business G</span></a></li>
<li><a href="#"><span>Business H</span></a></li>
<li><a href="#"><span>Business I</span></a></li>
<li><a href="#"><span>Business J</span></a></li>
<li><a href="#"><span>Business K</span></a></li>
<li><a href="#"><span>Business L</span></a></li>
<li><a href="#"><span>Business M</span></a></li>
<li><a href="#"><span>Business N</span></a></li>
<li><a href="#"><span>Business O</span></a></li>
<li><a href="#"><span>SUBMIT</span></a></li>
</ul>
</div>
</div>
<script>
$("#menu-toggle").click( function (e){
e.preventDefault()
$("#wrapper").toggleClass("menuDisplayed")
});
</script>
<script>
$("#business-toggle").click( function (e){
e.preventDefault()
$(".businesses-wrapper").toggleClass("menuDisplayed")
});
</script>
<script>
var enterHandler = function(){
$("#count").show();
$("#vis-logo").hide();
};
var leaveHandler = function(){
$("#count").hide();
$("#vis-logo").show();
};
$("#vis-logo").hover(enterHandler, leaveHandler);
$("#innermost-circle").hover(enterHandler, leaveHandler);
$("#count").hover(enterHandler, leaveHandler);
</script>
<script src="https://unpkg.com/d3-array@1"></script>
<script src="https://unpkg.com/d3-collection@1"></script>
<script src="https://unpkg.com/d3-path@1"></script>
<script src="https://unpkg.com/d3-shape@1"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3-sankey/0.7.1/d3-sankey.js"></script>
<script>
const width = 500
const height = 800
let data = {
nodes : [
{"id": "BA"},
{"id": "BB"},
{"id": "BC"},
{"id": "BD"},
{"id": "BE"},
{"id": "BF"},
{"id": "BG"},
{"id": "BH"},
{"id": "BI"},
{"id": "BJ"},
{"id": "BK"},
{"id": "BL"},
{"id": "BM"},
{"id": "BN"},
{"id": "BO"},
{"id": "BA - Selected"},
{"id": "BB - Selected"},
{"id": "BC - Selected"},
{"id": "Connections"}
],
links : [
{"source": "BA", "target": "BA - Selected", "value":300},
{"source": "BB", "target": "BB - Selected", "value":280},
{"source": "BC", "target": "BC - Selected", "value":100},
{"source": "BA - Selected", "target": "Connections", "value":227},
{"source": "BB - Selected", "target": "Connections", "value":227},
{"source": "BC - Selected", "target": "Connections", "value":227}
]};
const sankey = d3
.sankey()
.size([width, height])
.nodeId(d => d.id)
.nodeWidth(20)
.nodePadding(10)
.nodeAlign(d3.sankeyCenter);
let graph = sankey(data);
svg = d3.select('.col-lg-12')
.append('svg')
.attr('id', 'sankey')
.attr('width', 700)
.attr('height', 450)
let links = svg
.append("g")
.classed("links", true)
.selectAll("path")
.data(graph.links)
.enter()
.append("path")
.classed("link", true)
.attr("d", d3.sankeyLinkHorizontal())
.attr("fill", "none")
.attr("stroke", "#606060")
.attr("stroke-width", d => d.width)
.attr("stoke-opacity", 0.5);
let nodes = svg
.append("g")
.classed("nodes", true)
.selectAll("rect")
.data(graph.nodes)
.enter()
.append("rect")
.classed("node", true)
.attr("x", d => d.x0)
.attr("y", d => d.y0)
.attr("width", d => d.x1 - d.x0)
.attr("height", d => d.y1 - d.y0)
.attr("fill", "blue")
.attr("opacity", 0.8);
</script>
</body>
</html>
Не могли бы вы мне помочь, научив меня, как заставить мой санки взять размеры, которые я указал?