web-dev-qa-db-ja.com

d3jsを使用してsvg要素の幅を取得するにはどうすればよいですか？

私は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変数はnull配列だと思います。

D3jsを使用してsvg要素の幅を取得するにはどうすればよいですか？

javascriptsvgd3.js
32
linto cheeran
<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要素が読み込まれた後にスクリプトを配置するだけで、すべて問題ありません。

31
Andrew Surzhynskyi

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

これは数値であり、数式で使用できます

17
greg
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);
6
kpmartin

Svg.attr（ "width"）を使用してみてください。単なる数字の文字列を提供します。

3
circleofconfusion

この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"）が文字列を返すことに注意してください。

2
user3724163