¿Cómo puedo obtener el ancho de un elemento svg utilizando d3js?

Estoy usando d3js para encontrar el ancho de un elemento svg el código que se indican a continuación:

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

Pero devuelve este error:

Uncaught TypeError: No se puede llamar el método ‘getPropertyValue’ null

Creo, el svg variable es un valor nulo de la matriz.

¿Cómo puedo obtener el ancho de un elemento svg utilizando d3js?

5 Kommentare

  1. 31
    <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>

    Sólo tiene que colocar su secuencia de comandos después de svg elemento es cargado por el navegador y todo va a estar bien.

    • O ejecutar después de la carga de página.
    • svg.de estilo(«width») devuelve el valor con ‘px’ agregó que no es conveniente.
    • Siempre se puede tomar ‘px’ de distancia mediante el uso de algo como esto: var widthString = svg.de estilo(«width»); var ancho = widthString.longitud > 2 ? Número( widthString.substring( 0, widthString.longitud – 2 ) ) : 0 ;
    • O, más simplemente, defectuoso, parseInt(svg.de estilo(«width»))
    • Tenga cuidado con los parseInt para esto. Si el SVG es de estilo mediante porcentajes, a continuación, usted no va a obtener un número exacto mediante parseInt (obtendrás 100 para una anchura de ‘100%’)
  2. 17

    si usted tiene un SVG elemento w/id=marco…

     frame = d3.select('#frame')
                         .attr('class', 'frame')
    
                fh = frame.style("height").replace("px", "");
                fw = frame.style("width").replace("px", "");

    fh y fw ahora pueden ser utilizados en expresiones matemáticas.

    usted también puede caer de nuevo a jQuery

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

    que son números y pueden ser utilizados en expresiones matemáticas

  3. 6
    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);
    • para escribir menos y también más velocidad que usted puede hacer var h = +svg.estilo («altura»);
  4. 3

    Trate de usar svg.attr(«width»). Solo le da a un simple número de cadena.

    • Esto devuelve la cadena «100%» al menos cuando el uso de porcentajes.
  5. 2

    Si este svg se guarda en una variable, por ejemplo:

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

    A continuación, directamente se puede utilizar la variable vis para obtener el ancho de svg por:

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

    El resultado está en la unidad «px». Prestar atención a que vis.de estilo(«width») devuelve una cadena.

Kommentieren Sie den Artikel

Bitte geben Sie Ihren Kommentar ein!
Bitte geben Sie hier Ihren Namen ein

Pruebas en línea