[tooltip] सर्कल के माउसओवर पर डेटा दिखाएं



Answers

टूलटिप बनाने का एक बहुत अच्छा तरीका यहां वर्णित है: सरल डी 3 टूलटिप उदाहरण

आपको एक div जोड़ना है

var tooltip = d3.select("body")
    .append("div")
    .style("position", "absolute")
    .style("z-index", "10")
    .style("visibility", "hidden")
    .text("a simple tooltip");

फिर आप इसका उपयोग कर टॉगल कर सकते हैं

.on("mouseover", function(){return tooltip.style("visibility", "visible");})
.on("mousemove", function(){return tooltip.style("top",
    (d3.event.pageY-10)+"px").style("left",(d3.event.pageX+10)+"px");})
.on("mouseout", function(){return tooltip.style("visibility", "hidden");});

d3.event.pageX / d3.event.pageY वर्तमान माउस समन्वय है।

यदि आप टेक्स्ट को बदलना चाहते हैं तो आप tooltip.text("my tooltip text"); उपयोग कर सकते हैं tooltip.text("my tooltip text");

कार्य उदाहरण

Question

मेरे पास डेटा का एक सेट है जो मैं एक बिखरने में साजिश कर रहा हूं। जब मैं मंडलियों में से एक को माउसवर करता हूं तो मैं इसे डेटा के साथ पॉपअप करना चाहता हूं (जैसे x, y मान, शायद अधिक)। यहां मैंने कोशिश की है:

vis.selectAll("circle")
   .data(datafiltered).enter().append("svg:circle")
   .attr("cx", function(d) { return x(d.x);})
   .attr("cy", function(d) {return y(d.y)})
   .attr("fill", "red").attr("r", 15)
   .on("mouseover", function() {
        d3.select(this).enter().append("text")
            .text(function(d) {return d.x;})
            .attr("x", function(d) {return x(d.x);})
            .attr("y", function (d) {return y(d.y);}); });

मुझे संदेह है कि मुझे कौन सा डेटा दर्ज करना है इसके बारे में अधिक जानकारीपूर्ण होना चाहिए?




आप माउसओवर में इस तरह के डेटा में उपयोग करने के लिए पास कर सकते हैं- माउसओवर इवेंट आपके पहले enter एड डेटा के साथ एक तर्क (और दूसरी तर्क के रूप में इंडेक्स) के रूप में फ़ंक्शन का उपयोग करता है, इसलिए आपको enter() का उपयोग enter() आवश्यकता नहीं है दूसरी बार।

vis.selectAll("circle")
.data(datafiltered).enter().append("svg:circle")
.attr("cx", function(d) { return x(d.x);})
.attr("cy", function(d) {return y(d.y)})
.attr("fill", "red").attr("r", 15)
.on("mouseover", function(d,i) {
    d3.select(this).append("text")
        .text( d.x)
        .attr("x", x(d.x))
        .attr("y", y(d.y)); 
});



Related