web-dev-qa-db-fra.com

Comment obtenir la largeur d'un élément svg en utilisant d3js?

J'utilise d3js pour trouver la largeur d'un élément svg le code donné ci-dessous:

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

Mais il a renvoyé cette erreur:

TypeError non capturé: impossible d'appeler la méthode "getPropertyValue" de null

Je pense que la variable svg est un tableau nul.

Comment puis-je obtenir la largeur d'un élément svg en utilisant d3js?

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>

Placez simplement votre script après que l'élément svg soit chargé par le navigateur et tout ira bien.

31
Andrew Surzhynskyi

si vous avez un élément SVG w/id = frame ...

 frame = d3.select('#frame')
                     .attr('class', 'frame')

            fh = frame.style("height").replace("px", "");
            fw = frame.style("width").replace("px", "");

fh et fw peuvent désormais être utilisés dans les expressions mathématiques.

vous pouvez également revenir à jQuery

  fw = console.log($("#frame").width());
  fh = console.log($("#frame").height());

qui sont des nombres et peuvent être utilisés dans des expressions mathématiques

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

Essayez d'utiliser svg.attr ("largeur"). Il donne juste une chaîne de chiffres simple.

3
circleofconfusion

Si ce svg est enregistré dans une variable, par exemple:

var vis = d3.select("#DivisionLabel").append("svg")
    .attr("width", "100%")
    .attr("height", height);

Ensuite, on peut directement utiliser la variable vis pour obtenir la largeur de svg en:

console.log(vis.style("width"));

Le résultat est dans l'unité "px". Faites attention à ce que vis.style ("width") renvoie une chaîne.

2
user3724163