কীভাবে কোনও এসভিজি গ্রাফিকে একটি টুলটিপ যুক্ত করবেন?

Question 1

আমার কাছে এসভিজি আয়তক্ষেত্রগুলির একটি সিরিজ রয়েছে (D3.js ব্যবহার করে) এবং আমি মাউসওভারটিতে একটি বার্তা প্রদর্শন করতে চাই, বার্তাটি এমন একটি বাক্স দ্বারা ঘিরে রাখা উচিত যা ব্যাকগ্রাউন্ড হিসাবে কাজ করে। এগুলি উভয়ই একে অপরের সাথে এবং আয়তক্ষেত্রের (পুরোপুরি এবং কেন্দ্রস্থ) পুরোপুরিভাবে সাজানো উচিত। এই কাজ করতে সবচেয়ে ভালো উপায় কি?

আমি "x", "y", "প্রস্থ" এবং "উচ্চতা" বৈশিষ্ট্যগুলি ব্যবহার করে একটি এসভিজি পাঠ্য যোগ করার চেষ্টা করেছি এবং তারপরে একটি এসভিজি রেক্টকে প্রিপেন্ডিং করছি। সমস্যাটি হ'ল পাঠ্যের রেফারেন্স পয়েন্টটি মাঝখানে রয়েছে (যেহেতু আমি এটি ব্যবহার করলাম কেন্দ্রের সাথে সংযুক্ত করে দেখতে চাই text-anchor: middle) তবে আয়তক্ষেত্রটির জন্য এটি শীর্ষে বাম স্থানাঙ্কিত হয়, এবং আমি পাঠ্যের চারপাশে কিছুটা মার্জিন চেয়েছিলাম যা এটি ধরণের করে তোলে বেদনা.

অন্য বিকল্পটি এইচটিএমএল ডিভি ব্যবহার করছিল, যা দুর্দান্ত হবে, কারণ আমি সরাসরি পাঠ্য এবং প্যাডিং যুক্ত করতে পারি তবে প্রতিটি আয়তক্ষেত্রের জন্য পরম স্থানাঙ্ক কীভাবে পেতে হয় তা আমি জানি না। এই কাজ করতে একটি উপায় আছে কি?

Question 2

আপনি Phrogz নির্দেশিত হিসাবে শিরোনাম উপাদান ব্যবহার করতে পারেন। কিছু ভাল টুলটিপস যেমন jQuery এর টিপসি http://onehackoranother.com/projects/jquery/tipsy/ (যা সমস্ত শিরোনাম উপাদানগুলি প্রতিস্থাপন করতে ব্যবহার করা যেতে পারে), বব মন্টেভার্ডের এনভিডি 3 বা তাদের বুটস্ট্র্যাপ থেকে টুইটারের টুলটিপ http: // twitter.github.com/bootstrap/

Question 3

আপনি কি কেবল এসভিজি <title>উপাদান এবং ডিফল্ট ব্রাউজারটি যেটি সরবরাহ করে তা ব্যবহার করতে পারেন ? (দ্রষ্টব্য: এই হল না হিসাবে একই titleবৈশিষ্ট্য আপনি ব্যবহার করতে পারেন DIV আছে / চিত্র / ধারন এইচটিএমএল, এটি একটি শিশু করা প্রয়োজন উপাদান নামে title)

rect {
  width: 100%;
  height: 100%;
  fill: #69c;
  stroke: #069;
  stroke-width: 5px;
  opacity: 0.5
}

<p>Mouseover the rect to see the tooltip on supporting browsers.</p>

<svg xmlns="http://www.w3.org/2000/svg">
  <rect>
    <title>Hello, World!</title>
  </rect>
</svg>

স্নিপেট প্রসারিত করুন

বিকল্পভাবে, আপনি যদি সত্যিই আপনার এসভিজিতে এইচটিএমএল দেখাতে চান তবে আপনি এইচটিএমএল সরাসরি এম্বেড করতে পারেন:

rect {
  width: 100%;
  height: 100%;
  fill: #69c;
  stroke: #069;
  stroke-width: 5px;
  opacity: 0.5
}

foreignObject {
  width: 100%;
}

svg div {
  text-align: center;
  line-height: 150px;
}

<svg xmlns="http://www.w3.org/2000/svg">
  <rect/>
  <foreignObject>
    <body xmlns="http://www.w3.org/1999/xhtml">
      <div>
        Hello, <b>World</b>!
      </div>
    </body>      
  </foreignObject>
</svg>

স্নিপেট প্রসারিত করুন

… তবে তারপরে আপনার ডিসপ্লেটি চালু এবং বন্ধ করতে জেএস দরকার need উপরে প্রদর্শিত হিসাবে, লেবেলটি সঠিক স্থানে উপস্থিত করার একটি উপায় হ'ল রেক্টট এবং এইচটিএমএল একইভাবে মোড়ানো যা <g>উভয়কে একসাথে অবস্থান করে।

কোনও এসভিজি উপাদান স্ক্রিনে রয়েছে তা জানতে জেএস ব্যবহার করতে আপনি ব্যবহার করতে পারেন getBoundingClientRect(), যেমন: http://phrogz.net/svg/html_location_in_svg_in_html.xhtml

Question 4

আমি খুঁজে পেলাম একমাত্র ভাল উপায় জাভাস্ক্রিপ্ট ব্যবহার করে একটি সরঞ্জামদণ্ড <div>ঘুরিয়ে আনতে । স্পষ্টতই এটি কেবল তখনই কাজ করে যদি আপনার এইচটিএমএল নথির ভিতরে এসভিজি থাকে - স্বতন্ত্র নয়। এবং এটি জাভাস্ক্রিপ্ট প্রয়োজন।

function showTooltip(evt, text) {
  let tooltip = document.getElementById("tooltip");
  tooltip.innerHTML = text;
  tooltip.style.display = "block";
  tooltip.style.left = evt.pageX + 10 + 'px';
  tooltip.style.top = evt.pageY + 10 + 'px';
}

function hideTooltip() {
  var tooltip = document.getElementById("tooltip");
  tooltip.style.display = "none";
}

#tooltip {
  background: cornsilk;
  border: 1px solid black;
  border-radius: 5px;
  padding: 5px;
}

<div id="tooltip" display="none" style="position: absolute; display: none;"></div>

<svg>
  <rect width="100" height="50" style="fill: blue;" onmousemove="showTooltip(evt, 'This is blue');" onmouseout="hideTooltip();" >
  </rect>
</svg>

স্নিপেট প্রসারিত করুন

Question 5

আমি সবসময় আমার সেটআপ সহ জেনেরিক সিএসএস শিরোনাম নিয়ে যাই। আমি আমার ব্লগ প্রশাসক পৃষ্ঠার জন্য কেবল বিশ্লেষণ তৈরি করছি building আমার অভিনব কিছু দরকার নেই এখানে কিছু কোড ...

let comps = g.selectAll('.myClass')
   .data(data)
   .enter()
   .append('rect')
   ...styling...
   ...transitions...
   ...whatever...

g.selectAll('.myClass')
   .append('svg:title')
   .text((d, i) => d.name + '-' + i);

এবং ক্রোমের একটি স্ক্রিনশট ...

Question 6

আমি কেবল HTML + সিএসএস ব্যবহার করে কিছু নিয়ে এসেছি something আশা করি এটা তোমার জন্য কাজ করবে

.mzhrttltp {
  position: relative;
  display: inline-block;
}
.mzhrttltp .hrttltptxt {
  visibility: hidden;
  width: 120px;
  background-color: #040505;
  font-size:13px;color:#fff;font-family:IranYekanWeb;
  text-align: center;
  border-radius: 3px;
  padding: 4px 0;
  position: absolute;
  z-index: 1;
  top: 105%;
  left: 50%;
  margin-left: -60px;
}

.mzhrttltp .hrttltptxt::after {
  content: "";
  position: absolute;
  bottom: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: transparent transparent #040505 transparent;
}

.mzhrttltp:hover .hrttltptxt {
  visibility: visible;
}

<div class="mzhrttltp"><svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 24 24" fill="none" stroke="#e2062c" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="feather feather-heart"><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"></path></svg><div class="hrttltptxt">علاقه&zwnj;مندی&zwnj;ها</div></div>

স্নিপেট প্রসারিত করুন

Question 7

এসভিজি-তে, শিরোনামটি লেখার সঠিক উপায়

<svg>
  <title id="unique-id">Checkout</title>
</svg>

এখানে আরো বিস্তারিত জানার জন্য পরীক্ষা https://css-tricks.com/svg-title-vs-html-title-attribute/