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

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

मुझे संदेह है कि मुझे और अधिक जानकारीपूर्ण होने की आवश्यकता है कि क्या डेटा दर्ज किया जाए?

Comments

मैंने भी कोशिश की है: vis.selectAll ("सर्कल")। प्रत्येक (फ़ंक्शन (डी) {vis.append ("svg: text")। Attr ("x", dx) .attr ("y", dy)। .text (फ़ंक्शन (d) {रिटर्न dx;});}); कोई फायदा नहीं हुआ।

— स्कॉटिबी

bl.ocks.org/Caged/6476579

— एहसान

Answer 1

मुझे लगता है कि आप जो चाहते हैं वह टूलटिप है। ऐसा करने का सबसे आसान तरीका एक svg:titleतत्व को प्रत्येक सर्कल में जोड़ना है, क्योंकि ब्राउज़र टूलटिप दिखाने का ध्यान रखेगा और आपको माउसहैंडलर की आवश्यकता नहीं है। कोड कुछ इस तरह होगा

vis.selectAll("circle")
   .data(datafiltered).enter().append("svg:circle")
   ...
   .append("svg:title")
   .text(function(d) { return d.x; });

यदि आप कट्टर उपकरण चाहते हैं, तो आप उदाहरण के लिए युक्तियों का उपयोग कर सकते हैं। एक उदाहरण के लिए यहाँ देखें ।

Comments

मुझे नुस्खे पसंद हैं। मेरा एकमात्र मुद्दा अब यह है कि यह सर्कल के ऊपरी बाएं कोने की ओर इशारा करता है, बजाय उस डेमो में किनारे के। मुझे कोई स्पष्ट कारण नहीं मिल रहा है। jsfiddle.net/scottieb/JwaaV (बहुत नीचे स्थित सुझाव)

— ScottieB

उस jsfiddle को कोई टूलटिप्स नहीं लगता है?

— लार्स कोथॉफ

आप टूलटिप को जोड़ने का प्रयास कर सकते हैं svg:gकि आप वास्तविक सर्कल के साथ ओवरले करें, लेकिन शून्य चौड़ाई और ऊंचाई दें। वर्तमान में यह बाउंडिंग बॉक्स ले जा रहा है और टूलटिप को किनारे पर रख रहा है। टिप्सी के विकल्पों के साथ खेलने से भी मदद मिल सकती है।

— लार्स कोथॉफ

यह अब काम नहीं करता है। इसके अलावा मुझे svg का उपयोग करके एक उदाहरण मिला: शीर्षक जो विफल रहता है: bl.ocks.org/ilyabo/1339996

— nos

@nos मेरे लिए काम करता है।

— लार्स कोथॉफ

Answer 2

टूलटिप बनाने का एक बहुत अच्छा तरीका यहां वर्णित है: सरल डी 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");

काम करने का उदाहरण

Comments

क्या आप डेटा को इस टूलटिप से बाँध सकते हैं?

— जॉर्ज लीताओ

Afaik आप डेटा को हर DOM-element पर बाँध सकते हैं।

— Pwdr

डेटा को इस पर बाँधने के लिए, बस कोष्ठक के अंदर d जोड़ें जैसे: फ़ंक्शन (d) {... और टेक्स्ट को कभी भी आप चाहते हैं में बदलें। उदाहरण के लिए, मान लें कि आपके पास एक नाम है: tooltip.text (d.name):

— thatOneGuy

Answer 3

ऐसा करने के लिए एक बढ़िया पुस्तकालय है जिसे मैंने हाल ही में खोजा है। यह उपयोग करने के लिए सरल है और परिणाम काफी साफ है: डी 3-टिप।

आप यहां एक उदाहरण देख सकते हैं :

मूल रूप से, आपको बस इतना करना है कि डाउनलोड करें ( index.js ), स्क्रिप्ट शामिल करें:

<script src="index.js"></script>

और फिर यहां से निर्देशों का पालन करें (उदाहरण के लिए एक ही लिंक)

लेकिन आपके कोड के लिए, यह कुछ इस तरह होगा:

विधि को परिभाषित करें:

var tip = d3.tip()
  .attr('class', 'd3-tip')
  .offset([-10, 0])
  .html(function(d) {
    return "<strong>Frequency:</strong> <span style='color:red'>" + d.frequency + "</span>";
  })

अपना svg बनाएं (जैसा कि आप पहले से ही करते हैं)

var svg = ...

विधि को बुलाओ:

svg.call(tip);

अपनी वस्तु में टिप जोड़ें:

vis.selectAll("circle")
   .data(datafiltered).enter().append("svg:circle")
...
   .on('mouseover', tip.show)
   .on('mouseout', tip.hide)

CSS जोड़ना न भूलें:

<style>
.d3-tip {
  line-height: 1;
  font-weight: bold;
  padding: 12px;
  background: rgba(0, 0, 0, 0.8);
  color: #fff;
  border-radius: 2px;
}

/* Creates a small triangle extender for the tooltip */
.d3-tip:after {
  box-sizing: border-box;
  display: inline;
  font-size: 10px;
  width: 100%;
  line-height: 1;
  color: rgba(0, 0, 0, 0.8);
  content: "\25BC";
  position: absolute;
  text-align: center;
}

/* Style northward tooltips differently */
.d3-tip.n:after {
  margin: -1px 0 0 0;
  top: 100%;
  left: 0;
}
</style>

Comments

नवीनतम d3- टिप d3v4 को ठीक तरह से सपोर्ट करता है। यह स्पष्ट नहीं है कि क्या आप Google के आसपास हैं, लेकिन यह मेरे लिए d3v4 के साथ बहुत अच्छा काम कर रहा है।

— मूडबूम

Answer 4

आप इस तरह से माउसओवर में उपयोग किए जाने वाले डेटा में पास हो सकते हैं- माउसओवर इवेंट आपके पूर्ववर्ती 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)); 
});

Comments

धन्यवाद। मुझे वास्तव d3.select(this)में आकार को संशोधित करने की आवश्यकता थी और पता नहीं था कि कैसे एक प्रवेश / अद्यतन में उदाहरण प्राप्त करना है।

— टर्बो

आप कुछ फ़ंक्शन x () और y () का उपयोग कर रहे हैं जो आपके कोड में परिभाषित नहीं हैं। मुझे लगता है कि इसे हटाया जा सकता है।

— रॉबर्ट

उन्हें ओपी में दिया गया

— danimal

Answer 5

यह संक्षिप्त उदाहरण d3 में कस्टम टूलटिप बनाने के सामान्य तरीके को दर्शाता है।

var w = 500;
var h = 150;

var dataset = [5, 10, 15, 20, 25];

// firstly we create div element that we can use as
// tooltip container, it have absolute position and
// visibility: hidden by default

var tooltip = d3.select("body")
  .append("div")
  .attr('class', 'tooltip');

var svg = d3.select("body")
  .append("svg")
  .attr("width", w)
  .attr("height", h);

// here we add some circles on the page

var circles = svg.selectAll("circle")
  .data(dataset)
  .enter()
  .append("circle");

circles.attr("cx", function(d, i) {
    return (i * 50) + 25;
  })
  .attr("cy", h / 2)
  .attr("r", function(d) {
    return d;
  })
  
  // we define "mouseover" handler, here we change tooltip
  // visibility to "visible" and add appropriate test
  
  .on("mouseover", function(d) {
    return tooltip.style("visibility", "visible").text('radius = ' + d);
  })
  
  // we move tooltip during of "mousemove"
  
  .on("mousemove", function() {
    return tooltip.style("top", (event.pageY - 30) + "px")
      .style("left", event.pageX + "px");
  })
  
  // we hide our tooltip on "mouseout"
  
  .on("mouseout", function() {
    return tooltip.style("visibility", "hidden");
  });

.tooltip {
    position: absolute;
    z-index: 10;
    visibility: hidden;
    background-color: lightblue;
    text-align: center;
    padding: 4px;
    border-radius: 4px;
    font-weight: bold;
    color: orange;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.11.0/d3.min.js"></script>

Comments

यदि किसी को ऑब्जेक्ट की स्थिति के सापेक्ष स्थानांतरित करने के लिए टूल-टिप की आवश्यकता होती है। जैसे पेड़ के ग्राफ के मामले में। आप विशेषता return tooltip.style("top", (d.x + 40) + "px") .style("left", (d.y + 80) + "px");में उपयोग करना चाह सकते हैं 'mousemove'। d.xइच्छा मदद वस्तु, नहीं पूरे पृष्ठ के लिए उपकरण की नोक रिश्तेदार के लिए कदम

— चंद्र कंठ