我正在使用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>
但它返回了这个错误:
未捕获的TypeError:无法调用null
的方法'getPropertyValue'
我认为,svg变量是一个空数组。
如何使用d3js获取svg元素的宽度?
答案 0 :(得分:31)
<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>
只需在浏览器加载svg元素后放置脚本,一切都会好的。
答案 1 :(得分:17)
如果你有一个SVG元素w / id = frame ...
frame = d3.select('#frame')
.attr('class', 'frame')
fh = frame.style("height").replace("px", "");
fw = frame.style("width").replace("px", "");
fh和fw现在可用于数学表达式。
你也可以回到jQuery
fw = console.log($("#frame").width());
fh = console.log($("#frame").height());
是数字,可用于数学表达式
答案 2 :(得分:6)
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);
答案 3 :(得分:3)
尝试使用svg.attr(“width”)。它只是给出一个普通的数字字符串。
答案 4 :(得分:2)
如果此svg保存在变量中,例如:
var vis = d3.select("#DivisionLabel").append("svg")
.attr("width", "100%")
.attr("height", height);
然后直接可以使用变量vis
来获得svg的宽度:
console.log(vis.style("width"));
结果在单位&#34; px&#34;。注意vis.style(&#34; width&#34;)返回一个字符串。
答案 5 :(得分:1)
除非您初始化属性(宽度)的值,否则最终将得到“ auto”值,我建议使用以下内容。
d3element.getBoundingClientRect().width;
或
var element = d3.select('.ClassName').node();
element.getBoundingClientRect().width;
答案 6 :(得分:0)
// 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
const svg = d3.select('svg');
const width = +svg.attr('width');
const height = +svg.attr('height');
console.log(width)
console.log(height)
这是今天对我有用的。