Отзывчивый SVG с атрибутом d3.js и высотой

Question

У меня есть два div элемента рядом. В первом div (называемом #scatterplot) график отображается автоматически. Размер контейнера SVG устанавливается автоматически с использованием следующего кода в d3.js:

var vis = d3.select("#scatterplot")
   //container class to make it responsive
   .classed("svg-container", true)
   .append("svg")
   //responsive SVG needs these 2 attributes and no width and height attr
   .attr("preserveAspectRatio", "xMinYMin meet")
   .attr("viewBox", "0 0 700 700")
   //class to make it responsive
   .classed("svg-content-responsive", true)
   .append("g")
   .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

Соответствующий код CSS выглядит следующим образом:

.svg-container {
    display: inline-block;
    position: relative;
    width: 100%;
    padding-bottom: 100%; /* aspect ratio */
    vertical-align: top;
    overflow: hidden;
}
.svg-content-responsive {
    display: inline-block;
    position: absolute;
    top: 10px;
    left: 0;
}

Вопрос: Второй div называется #wordcloud. Мне нужно отрегулировать высоту #wordcloud в соответствии с #scatterplot div. Любое предложение, как это сделать?

Answer 1

Вы можете использовать метод d3.style(), чтобы установить #wordcloud высоту внутри встроенного стиля. Например:

var height = d3.select('#scatterplot').node().getBoundingClientRect().height;
d3.select('#wordcloud').style('height', height + 'px');

div {
  width: 50%;
  float: left;
}

#scatterplot {
  background: #f00;
}

#wordcloud {
  background: #0f0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<div id="scatterplot">
  <p>The text is used<br/>to change height<br/>of red div.</p>
</div>
<div id="wordcloud">
  <p>The heights of red and green divs are same.</p>
</div>