Come ottengo la larghezza di un elemento svg usando d3js?

Question

Sto usando d3js per trovare la larghezza di uno SVG elemento il codice riportato qui di seguito:

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

Ma ritornato questo errore:

Uncaught TypeError: Cannot call method 'getPropertyValue' of null

credo, la variabile svg è un array null.

Come posso ottenere la larghezza di un elemento svg usando d3js?

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

Basta posizionare lo script dopo che l'elemento svg è stato caricato dal browser e tutto andrà bene.

Answer 2

se si dispone di un elemento SVG w/id = telaio ...

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

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

FH e FW possono ora essere utilizzati nelle espressioni matematiche.

si può anche cadere di nuovo a jQuery

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

che sono i numeri e può essere utilizzato nelle espressioni matematiche

Answer 3

Provare a utilizzare svg.attr ("larghezza"). Fornisce semplicemente una semplice stringa numerica.

Answer 4

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

Answer 5

Se questa SVG viene salvato in una variabile, ad esempio:

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

Poi direttamente si può usare la variabile vis per ottenere la larghezza di SVG da:

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

L' il risultato è nell'unità "px". Presta attenzione che vis.style ("width") restituisce una stringa.