मैं d3js का उपयोग कर एक svg तत्व की चौड़ाई कैसे प्राप्त करूं?

Question

मैं 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: Cannot call method 'getPropertyValue' of null

मुझे लगता है, svg चर एक अशक्त सरणी है।

मैं d3js का उपयोग कर एक svg तत्व की चौड़ाई कैसे प्राप्त कर सकता हूं?

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> 

बस अपनी स्क्रिप्ट के बाद svg तत्व ब्राउज़र द्वारा लोड किया जाता है जगह है और सब ठीक हो जाएगा।

Answer 2

अगर आप एक एसवीजी तत्व डब्ल्यू/आईडी = फ्रेम ...

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

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

एफ एच और परिवार कल्याण अब गणित अभिव्यक्ति में इस्तेमाल किया जा सकता है।

आप भी jQuery

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

जो नंबर दिए गए हैं और गणित अभिव्यक्ति में इस्तेमाल किया जा सकता

Answer 3

("चौड़ाई") svg.attr उपयोग करने का प्रयास करने के लिए वापस छोड़ सकते हैं। यह सिर्फ एक सादा संख्या स्ट्रिंग देता है।

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

इस svg उदाहरण के लिए, एक चर में सहेजा जाता है, तो:

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

फिर सीधे एक चर vis उपयोग कर सकते हैं द्वारा svg की चौड़ाई प्राप्त करने के लिए:

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

परिणाम इकाई "पीएक्स" में है। ध्यान दें कि vis.style ("चौड़ाई") एक स्ट्रिंग देता है।