36

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

4

7 回答 7

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

于 2013-10-31T15:23:57.507 回答
18

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

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

于 2014-05-15T18:56:39.993 回答
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);
于 2015-03-19T18:50:08.893 回答
4

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

于 2014-07-23T13:36:46.400 回答
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") 返回一个字符串。

于 2015-11-12T14:50:15.887 回答
2

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

d3element.getBoundingClientRect().width;

或者

var element = d3.select('.ClassName').node();
element.getBoundingClientRect().width;
于 2020-07-26T05:27:13.680 回答
-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)

在这个日子里，这对我有用。

于 2020-05-19T11:35:44.937 回答