एक svg ग्राफिक के लिए टूलटिप कैसे जोड़ें?

Question 1

मेरे पास svg आयतों (D3.js का उपयोग करके) की एक श्रृंखला है और मैं माउसओवर पर एक संदेश प्रदर्शित करना चाहता हूं, संदेश को एक बॉक्स से घिरा होना चाहिए जो पृष्ठभूमि के रूप में कार्य करता है। वे दोनों पूरी तरह से एक दूसरे के साथ और आयत (शीर्ष पर और केंद्रित) में संरेखित होने चाहिए। इसे करने का बेहतरीन तरीका क्या है?

मैंने "x", "y", "चौड़ाई" और "ऊँचाई" विशेषताओं का उपयोग करके एक svg पाठ जोड़ने की कोशिश की, और फिर एक svg rect को प्रस्तुत किया। समस्या यह है कि पाठ के लिए संदर्भ बिंदु बीच में है (क्योंकि मैं चाहता हूं कि यह मेरे द्वारा उपयोग किए गए संरेखित केंद्रित हो text-anchor: middle), लेकिन आयत के लिए यह शीर्ष बाएं समन्वय है, साथ ही मुझे पाठ के चारों ओर थोड़ा सा मार्जिन चाहिए था जो इसे इस तरह का बनाता है एक दर्द।

एक अन्य विकल्प एक html div का उपयोग कर रहा था, जो अच्छा होगा, क्योंकि मैं सीधे पाठ और पैडिंग जोड़ सकता हूं, लेकिन मुझे नहीं पता कि प्रत्येक आयत के लिए पूर्ण निर्देशांक कैसे प्राप्त करें। क्या इसे करने का कोई तरीका है?

Question 2

आप Phrogz संकेत के रूप में शीर्षक तत्व का उपयोग कर सकते हैं। कुछ अच्छे टूलटिप्स भी हैं जैसे jQuery के Tipsy http://onehackoranother.com/projects/jquery/tipsy/ (जिसका उपयोग सभी शीर्षक तत्वों को बदलने के लिए किया जा सकता है), बॉब मोंटेवर्डे के nvd3 या ट्विटर के टूलटिप को उनके बूटस्ट्रैप http: // से भी। twitter.github.com/bootstrap/

Question 3

क्या आप एसवीजी <title>तत्व और डिफ़ॉल्ट ब्राउज़र का उपयोग कर सकते हैं जो इसे प्रदान करता है? (नोट: यह वह जगह है नहीं के रूप में ही titleविशेषता आप पर उपयोग कर सकते हैं div / img / फैला में एचटीएमएल, यह एक बच्चे के होने की जरूरत है तत्व नामित 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>

स्निपेट का विस्तार करें

वैकल्पिक रूप से, यदि आप वास्तव में अपने SVG में HTML दिखाना चाहते हैं, तो आप HTML को सीधे एम्बेड कर सकते हैं:

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>

स्निपेट का विस्तार करें

… लेकिन फिर आपको डिस्प्ले को चालू और बंद करने के लिए JS की आवश्यकता होगी। जैसा कि ऊपर दिखाया गया है, लेबल को सही स्थान पर प्रकट करने का एक तरीका यह है कि इसमें रेक्ट और एचटीएमएल को लपेटा जाए जो इन <g>दोनों को एक साथ रखता है।

जेएस का उपयोग करने के लिए स्क्रीन पर एक एसवीजी तत्व कहां है, आप इसका उपयोग कर सकते हैं getBoundingClientRect(), उदाहरण के लिए http://phrogz.net/svg/html_location_in_svg_in_html.xhtml

Question 4

एकमात्र अच्छा तरीका मुझे यह मिला कि जावास्क्रिप्ट का उपयोग एक टूलटिप को घुमाने के लिए करना <div>था। स्पष्ट रूप से यह केवल तभी काम करता है जब आपके पास HTML दस्तावेज़ के अंदर SVG हो - स्टैंडअलोन नहीं। और इसके लिए जावास्क्रिप्ट की आवश्यकता होती है।

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

मैं हमेशा अपने सेटअप के साथ सामान्य सीएसएस शीर्षक के साथ जाता हूं। मैं अपने ब्लॉग व्यवस्थापक पृष्ठ के लिए केवल एनालिटिक्स का निर्माण कर रहा हूं। मुझे कुछ नहीं चाहिए। यहाँ कुछ कोड है ...

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 + CSS का उपयोग करके कुछ के साथ आया था। आशा है कि यह आप के लिए काम करता है

.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>

स्निपेट का विस्तार करें