如何使用 d3js 获取 svg 元素的宽度？
[英]How do I get the width of an svg element using d3js?
问题描述
I am using d3js to find the width of an svg element the code given below:
我正在使用 d3js 找到下面给出的代码的 svg 元素的宽度：
<script>
var body = d3.select("body");
console.log(body);
var svg = body.select("svg");
console.log(svg);
console.log(svg.style("width"));
</script>
<svg class="svg" height="3300" width="2550">
<image x="0" y="0" height="3300" width="2550" xlink:href="1.jpg"></image>
<rect class="word" id="15" x="118" y="259" width="182" height="28"
text="Substitute"></rect>
</svg>
But it returned this error:但它返回了这个错误：
Uncaught TypeError: Cannot call method 'getPropertyValue' of null
I think, the svg variable is a null array.我认为， svg 变量是一个空数组。
How can I get the width of an svg element using d3js?如何使用 d3js 获取 svg 元素的宽度？
7 个解决方案
解决方案1
36 已采纳 2013-10-31 15:23:57
<svg class="svg" height="3300" width="2550">
<image x="0" y="0" height="3300" width="2550" xlink:href="1.jpg"></image>
<rect class="word" id="15" x="118" y="259" width="182" height="28"
text="Substitute"></rect>
</svg>
<script>
var body = d3.select("body");
console.log(body);
var svg = body.select("svg");
console.log(svg);
console.log(svg.style("width"));
</script>
Just place your script after svg element is loaded by the browser and all will be fine.只需在浏览器加载 svg 元素后放置您的脚本，一切都会好起来的。
解决方案2
18 2014-05-15 18:56:39
if you have an SVG element w/ id=frame...如果您有一个带有 id=frame 的 SVG 元素...
frame = d3.select('#frame')
.attr('class', 'frame')
fh = frame.style("height").replace("px", "");
fw = frame.style("width").replace("px", "");
fh and fw can now be used in math expressions. fh 和 fw 现在可用于数学表达式。
you can also drop back to jQuery你也可以回到 jQuery
fw = console.log($("#frame").width());
fh = console.log($("#frame").height());
which are numbers and can be used in math expressions哪些是数字，可用于数学表达式
解决方案3
7 2015-03-19 18:50:08
var svg = d3.select("body")
.append("svg")
.attr("width", "100%")
.attr("height", "100%");
var w = parseInt(svg.style("width"), 10);
var h = parseInt(svg.style("height"), 10);
解决方案4
4 2014-07-23 13:36:46
Try using svg.attr("width").尝试使用 svg.attr("width")。 It just gives a plain number string.它只是给出一个普通的数字字符串。
解决方案5
2 2015-11-12 14:50:15
If this svg is saved in a variable, for example:如果此 svg 保存在变量中，例如：
var vis = d3.select("#DivisionLabel").append("svg")
.attr("width", "100%")
.attr("height", height);
Then directly one can use the variable vis to get the width of svg by:然后可以直接使用变量vis通过以下方式获取 svg 的宽度：
console.log(vis.style("width"));
The result is in unit "px".结果以“px”为单位。 Pay attention that vis.style("width") returns a string.注意 vis.style("width") 返回一个字符串。
解决方案6
2 2020-07-26 05:27:13
You will end up with value "auto" unless you initialize the values of the attributes (width), I would recommend the below instead.除非您初始化属性（宽度）的值，否则您最终会得到值“auto”，我建议改为使用以下值。
d3element.getBoundingClientRect().width;
or或
var element = d3.select('.ClassName').node();
element.getBoundingClientRect().width;
解决方案7
0 2020-05-19 11:35:44
// HTML // HTML
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<svg width="950" height="500"></svg>
<script src="https://d3js.org/d3.v5.min.js"></script>
<script src="index1.js"></script>
</body>
</html>
//JavaScript //JavaScript
const svg = d3.select('svg');
const width = +svg.attr('width');
const height = +svg.attr('height');
console.log(width)
console.log(height)
At this days this is what work for me.在这一天，这对我有用。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.