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

【问题标题】：How do I get the width of an svg element using d3js?如何使用 d3js 获取 svg 元素的宽度？
【发布时间】：2013-11-11 16:11:35
【问题描述】：

我正在使用 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 元素的宽度？

【问题讨论】：

标签： javascript svg d3.js

【解决方案1】：

<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 元素后放置您的脚本，一切都会好起来的。

【讨论】：

或者页面加载完毕后执行。
svg.style("width") 返回值加上 'px' 不方便。
你总是可以通过使用这样的东西来拿走'px'： var widthString = svg.style("width"); var 宽度 = widthString.length > 2 ？数字（widthString.substring（0，widthString.length - 2））：0；
或者，更简单/错误，parseInt(svg.style("width"))
谨慎使用 parseInt。如果 SVG 使用百分比设置样式，则使用 parseInt 将无法获得准确的数字（宽度为 '100%' 时您将获得 100）

【解决方案2】：

如果您有一个带有 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());

可以在数学表达式中使用的数字

【讨论】：

【解决方案3】：

尝试使用 svg.attr("width")。它只是给出一个普通的数字字符串。

【讨论】：

至少在使用百分比时返回字符串“100%”。

【解决方案4】：

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

【讨论】：

为了减少打字并提高速度，您可以这样做 var h = +svg.style('height');

【解决方案5】：

如果这个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") 返回一个字符串。

【讨论】：

【解决方案6】：

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

现在这对我有用。

【讨论】：

【解决方案7】：

除非你初始化属性（宽度）的值，否则你最终会得到值“auto”，我建议改为下面的值。

d3element.getBoundingClientRect().width;

或

var element = d3.select('.ClassName').node();
element.getBoundingClientRect().width;

【讨论】：