d3.js 如何使用d3js得到一个有百分比的svg元素的宽度？

laximzn5 于 2022-11-12 发布在其他

关注(0)|答案(1)|浏览(218)

我试着把一个图表拉伸到一个div-father的尺寸，但是我实际上不能取div-father的尺寸，所以我不能改变图表的尺寸。
我有一个简单的HTML

<div style="height: 300px; width: 500px">
    <svg width="100%" height="100%"></svg>
</div>

这是我的js

var svg = d3.select("svg"),
    margin = 100,
    width = svg.attr("width") - margin,
    height = svg.attr("height") - margin

但是我读到attr("width")和attr("height")都返回一个字符串，所以值应该是“100%"。我可以做些什么来使真实的尺寸基于div如何改变他的大小呢？

1条答案

您应该使用：
svg.node().getBoundingClientRect() ，以取得实际的长度和高度值。
例如，若要取得特定的长度和高度，您可以使用：

var clientRect = svc.node().getBoundingClientRect()
var width = clientRect.width
var height = clientRect.height

中的每一个
请参阅 this question 的答案，该答案与