logo标签列表

如何使用d3js获取svg元素的宽度？

javascriptsvgd3.js
37

我正在使用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>

但它返回了这个错误：

未捕获的类型错误：无法调用null的'getPropertyValue'方法

我认为，svg变量是一个空数组。

如何使用d3js获取svg元素的宽度？

7个回答
38
<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
或者在页面加载后执行它。 - vittore
4
svg.style("width")返回的值带有'px'后缀，这不太方便。 - user2846569
你可以通过以下方式去掉“px”：var widthString = svg.style("width"); var width = widthString.length > 2 ? Number( widthString.substring( 0, widthString.length - 2 ) ) : 0 ; - Andrew Surzhynskyi
4
或者更简单但不太准确的方式是，parseInt(svg.style("width"))。 - Reed Spool
1
使用parseInt时要小心。如果SVG使用百分比进行样式设置，则使用parseInt将无法获得准确的数字（对于宽度为“100％”，您将获得100）。 - hellsgate
17

如果您有一个id为frame的SVG元素...

 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());

它们是数字，可以用于数学表达式中。

7
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);
1
为了更少的输入和更快的速度，您可以使用 var h = +svg.style('height'); - wootscootinboogie
6

如果不初始化属性（宽度）的值，最终将得到“auto”值。我建议使用下面的代码来代替。

d3element.getBoundingClientRect().width;

或
var element = d3.select('.ClassName').node();
element.getBoundingClientRect().width;
4
尝试使用svg.attr("width")。它只会返回一个纯数字字符串。
1
这将返回字符串“100％”，至少在使用百分比时是如此。 - Daft Fox
2
如果这个SVG保存在一个变量中，例如：
var vis = d3.select("#DivisionLabel").append("svg")
    .attr("width", "100%")
    .attr("height", height);

那么直接使用变量vis，可以通过以下方式获取svg的宽度：

console.log(vis.style("width"));

结果以“px”为单位。请注意，vis.style（“width”）返回一个字符串。
-1

// 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)

现在这是对我有效的方法。

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接