D3.js: একটি স্বেচ্ছাসেবী উপাদান জন্য গণনা প্রস্থ এবং উচ্চতা কিভাবে পাবেন?

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
} 

এইচটিএমএল উপাদানগুলির জন্য

ব্যবহার selection.node().getBoundingClientRect()

Comments

এইচটিএমএল উপাদানগুলির জন্য, getBoundingClientRect()কেবল এসভিজি-এর পরিবর্তে ব্যবহার করুন getBBox()। ভালো লেগেছে:d3.select("body").node().getBoundingClientRect().width

— তোফহ

সাহায্য করার জন্য আরও কিছু তথ্য দিয়ে করতে পারেন। এসভিজি বা এইচটিএমএল উপাদানগুলির জন্য? এটি কি কেবল ফায়ারফক্সই সমস্যা? কনসোলে কি কিছু রিপোর্ট করা আছে? প্রত্যাবর্তিত মান কী? আপনার কাছে কোনও ন্যূনতম কোড উদাহরণ রয়েছে (jsfiddle) যা সমস্যাটি দেখিয়েছে?

— ক্রিস্টোফার হ্যাকেট

Answer 2

.getBoundingClientRect () ভিউপোর্টের সাথে সম্পর্কিত কোনও উপাদানটির আকার এবং অবস্থানটি প্রদান করে e আমরা সহজেই নিম্নলিখিত পেতে পারি

• বাম ডান
• উপর নিচ
• উচ্চতা প্রস্থ

উদাহরণ:

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

Answer 3

একবার আমি সমস্যার মুখোমুখি হয়েছি যখন আমি জানতাম না যে বর্তমানে উপাদানটি আমার ভেরিয়েবলের মধ্যে রয়েছে (এসভিজি বা এইচটিএমএল) তবে এটির প্রস্থ এবং উচ্চতা আমার দরকার ছিল needed আমি এই ফাংশনটি তৈরি করেছি এবং এটি ভাগ করতে চাই:

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

নীচে লুকানো স্নিপেটে ছোট্ট ডেমো। আমরা একই ফাংশন সহ নীল ডিভি এবং লাল এসভিজি বৃত্তের উপর ক্লিক করি।

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>