私は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要素の幅を取得するにはどうすればよいですか?
<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要素が読み込まれた後にスクリプトを配置するだけで、すべて問題ありません。
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());
これは数値であり、数式で使用できます
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);
Svg.attr( "width")を使用してみてください。単なる数字の文字列を提供します。
この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")が文字列を返すことに注意してください。