এসভিজি এর এক্স এবং ডিএক্স বৈশিষ্ট্যের মধ্যে পার্থক্য কী?

Question

এসভিজির এক্স এবং ডিএক্স বৈশিষ্ট্য (বা y এবং ডাই) এর মধ্যে পার্থক্য কী? অক্ষের শিফট অ্যাট্রিবিউট (ডিএক্স) বনাম লোকেশন অ্যাট্রিবিউট (এক্স) ব্যবহার করার উপযুক্ত সময় কখন হবে?

উদাহরণস্বরূপ, আমি লক্ষ করেছি যে প্রচুর ডি 3 উদাহরণ এরকম কিছু করছে

chart.append("text")
   .attr("x", 0)
   .attr("y", 0)
   .attr("dy", -3)
   .text("I am a label")

নীচেরগুলি একই কাজ করে বলে মনে হয় y এবং dy উভয়ই সেট করার জন্য কী সুবিধা বা যুক্তি?

chart.append("text")
   .attr("x", 0)
   .attr("y", -3)
   .text("I am a label")

Answer 1

xএবং yনিখুঁত স্থানাঙ্ক এবং dxএবং dyআপেক্ষিক স্থানাঙ্ক হয় (নির্দিষ্ট xএবং এর সাথে সম্পর্কিত y)।

আমার অভিজ্ঞতা, এটি ব্যবহার করার জন্য প্রচলিত নয় dxএবং dyউপর <text>উপাদানের (যদিও যদি আপনি, উদাহরণস্বরূপ, পজিশনিং টেক্সট এবং তারপর পৃথক কোড এটা সামঞ্জস্য জন্য কিছু কোড আছে সুবিধার কোডিং জন্য দরকারী হতে পারে)।

dxফ্যানসিয়ার মাল্টি-লাইন পাঠ্য বিন্যাসগুলি প্রতিষ্ঠার জন্য উপাদানগুলির ভিতরে নেস্টেড উপাদানগুলি dyব্যবহার করার সময় এবং বেশিরভাগই কার্যকর ।<tspan><text>

আরও তথ্যের জন্য আপনি এসভিজি স্পেকের পাঠ্য বিভাগটি পরীক্ষা করে দেখতে পারেন ।

Comments

এটি আমার কাছে মনে হয় যে d3.jsএটি বিভিন্ন ইউনিটের সংমিশ্রনের জন্য ব্যবহৃত হয়। x="3" dx="0.5em"যার মতো 3 পিক্সেল + অর্ধেক পাঠ্য লাইনের পরিমাণ।

— আর্থার

Answer 2

স্কটের উত্তরে যুক্ত করার জন্য, ইমে (হরফ আকারের ইউনিট) এর সাথে ব্যবহৃত ডাই সম্পূর্ণ পরিকল্পের সাথে উল্লিখিত পাঠ্য প্রান্তিককরণের জন্য খুব দরকারী। এটি MDN dy পাঠ্য উপাদানের উদাহরণে আচ্ছাদিত ।

Dy = 0.35 মিমি ব্যবহার করে ফন্টের আকার নির্বিশেষে উল্লম্বভাবে পাঠ্যকে কেন্দ্র করতে সহায়তা করে। আপনি যদি আপনার নিখুঁত স্থানাঙ্কগুলি দ্বারা বর্ণিত বিন্দুর চারপাশে আপনার পাঠ্যের কেন্দ্রটি ঘুরতে চান তবে এটিও সহায়তা করে।

<style>
text { fill: black; text-anchor: middle; }
line { stroke-width: 1; stroke: lightgray; }
</style>


<script>
dataset = d3.range(50,500,50);

svg = d3.select("body").append("svg");
svg.attr('width',500).attr('height', 500);

svg.append("line").attr('x1', 0).attr('x2', 500).attr('y1', 100).attr('y2', 100);
svg.append("line").attr('x1', 0).attr('x2', 500).attr('y1', 200).attr('y2', 200);

group = svg.selectAll("g")
    .data(dataset)
    .enter()
    .append("g");

// Without the dy=0.35em offset
group.append("text")
    .text("My text")
    .attr("x",function (d) {return d;})
    .attr("y",100)
    .attr("transform", function(d, i) {return "rotate("+45*i+","+d+",100)";});

// With the dy=0.35em offset
group.append("text")
    .text("My text")
    .attr("x",function (d) {return d;})
    .attr("y",200)
    .attr("dy","0.35em")
    .attr("transform", function(d, i) {return "rotate("+45*i+","+d+",200)";});
<script>

কোডেপেনে এটি দেখুন

আপনি যদি "dy = 0.35 মিমি" না অন্তর্ভুক্ত করেন তবে শব্দগুলি টেক্সটের নীচের দিকে ঘোরানো হয় এবং 180 এর পরে যেখানে সেগুলি ঘোরার আগে ছিল তার নীচে সারিবদ্ধ করুন। "Dy = 0.35 মিমি" সহ এগুলি পাঠ্যের কেন্দ্রের চারদিকে ঘোরে।

নোট করুন যে সিএসএস ব্যবহার করে ডাই সেট করা যাবে না।

Comments

যদি অন্য কেউ এতে প্রবেশ করে তবে আমি এসভিজি = ডি 3.স্লেট ("বডি") সেট না করে আমি এই কাজটি করতে পারছি না app এবং তারপরে পরের লাইনে অ্যাটর করল। svg.attr ({প্রস্থ: 500, উচ্চতা: 300}) ;. ভাগ করে নেওয়ার জন্য ধন্যবাদ!

— চক এল