Как получить ширину элемента svg с помощью d3js?

Я использую 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>

Но он вернул эту ошибку:

Uncaught TypeError: Невозможно вызвать метод getPropertyValue из null

Я думаю, переменная svg является нулевым массивом.

Как я могу получить ширину элемента svg с помощью d3js?

Ответ 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>

Просто поместите свой script после того, как элемент svg будет загружен браузером, и все будет в порядке.

Ответ 2

если у вас есть элемент SVG w/id = frame...

 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

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

Ответ 4

Попробуйте использовать svg.attr( "width" ). Он просто дает строчную строку.

Ответ 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" ) возвращает строку.