डी 3.जेएस: एक मनमाना तत्व के लिए गणना की गई चौड़ाई और ऊंचाई कैसे प्राप्त करें?

Question

मुझे gअपने मनमाने तत्व के लिए वास्तव में चौड़ाई और ऊंचाई जानने की आवश्यकता है SVGक्योंकि उपयोगकर्ता द्वारा क्लिक करने के बाद मुझे उसके चारों ओर एक चयन मार्कर खींचना होगा।

क्या मैं इंटरनेट में देखा है की तरह कुछ है: d3.select("myG").style("width")। समस्या यह है कि तत्व में हमेशा एक स्पष्ट चौड़ाई विशेषता सेट नहीं होगी। उदाहरण के लिए, जब मैं अंदर एक सर्कल बनाता हूं, तो इसमें चौड़ाई के बजाय gरेडियस ( r) सेट होगा। यहां तक ​​कि अगर मैं window.getComputedStyleएक पर विधि का उपयोग करता हूं circle, तो भी यह "ऑटो" लौटाएगा।

क्या मनमाने ढंग से svgसेगमेंट की चौड़ाई की गणना करने का कोई तरीका है D3?

धन्यवाद।

Answer 1

एसवीजी तत्वों के लिए

कुछ का उपयोग करके selection.node().getBBox()आप जैसे मान प्राप्त करते हैं

{
    height: 5, 
    width: 5, 
    y: 50, 
    x: 20
} 

HTML तत्वों के लिए

उपयोग selection.node().getBoundingClientRect()

Comments

HTML तत्वों के लिए, getBoundingClientRect()केवल SVG के बजाय का उपयोग करें getBBox()। जैसे:d3.select("body").node().getBoundingClientRect().width

— Toph

मदद करने के लिए थोड़ी और जानकारी के साथ कर सकते हैं। SVG या HTML तत्वों के लिए? क्या यह केवल फ़ायरफ़ॉक्स है जो मुद्दा है? क्या सांत्वना में कुछ बताया गया है? लौटाया गया मान क्या है? क्या आपके पास एक न्यूनतम कोड उदाहरण (jsfiddle) है जिसने समस्या का प्रदर्शन किया है?

— क्रिस्टोफर हैकेट

Answer 2

.getBoundingClientRect () viewport के सापेक्ष एक तत्व का आकार और उसकी स्थिति देता है। हम आसानी से निम्नलिखित प्राप्त कर सकते हैं

• बाएँ दांए
• ऊपर से नीचे
• लम्बाई चौड़ाई

उदाहरण :

var element = d3.select('.elementClassName').node();
element.getBoundingClientRect().width;

Answer 3

एक बार मुझे इस मुद्दे का सामना करना पड़ा जब मुझे नहीं पता था कि वर्तमान में मेरे चर (svg या html) में कौन सा तत्व संग्रहीत है, लेकिन मुझे इसे चौड़ाई और ऊंचाई प्राप्त करने की आवश्यकता है। मैंने यह फ़ंक्शन बनाया है और इसे साझा करना चाहता हूं:

function computeDimensions(selection) {
  var dimensions = null;
  var node = selection.node();

  if (node instanceof SVGElement) { // check if node is svg element
    dimensions = node.getBBox();
  } else { // else is html element
    dimensions = node.getBoundingClientRect();
  }
  console.log(dimensions);
  return dimensions;
}

नीचे छिपे स्निपेट में थोड़ा डेमो। हम एक ही फ़ंक्शन के साथ नीले div और लाल svg सर्कल पर क्लिक करते हैं।

var svg = d3.select('svg')
  .attr('width', 50)
  .attr('height', 50);

function computeDimensions(selection) {
	var dimensions = null;
  var node = selection.node();

  if (node instanceof SVGElement) {
   	dimensions = node.getBBox();
  } else {
  	dimensions = node.getBoundingClientRect();
  }
  console.clear();
  console.log(dimensions);
  return dimensions;
}

var circle = svg
    .append("circle")
    .attr("r", 20)
    .attr("cx", 30)
    .attr("cy", 30)
    .attr("fill", "red")
    .on("click", function() { computeDimensions(circle); });
    
var div = d3.selectAll("div").on("click", function() { computeDimensions(div) });

* {
  margin: 0;
  padding: 0;
  border: 0;
}

body {
  background: #ffd;
}

.div {
  display: inline-block;
  background-color: blue;
  margin-right: 30px;
  width: 30px;
  height: 30px;
}

<h3>
  Click on blue div block or svg circle
</h3>
<svg></svg>
<div class="div"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.11.0/d3.min.js"></script>