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





mouseover d3.js (5)


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

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>

मेरे पास डेटा का एक सेट है जो मैं एक बिखरने में साजिश कर रहा हूं। जब मैं मंडलियों में से एक को माउसवर करता हूं तो मैं इसे डेटा के साथ पॉपअप करना चाहता हूं (जैसे 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);}); });

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




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

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

यदि आप फैनसीयर टूलटिप्स चाहते हैं, तो आप उदाहरण के लिए टिप्स का उपयोग कर सकते हैं। उदाहरण के लिए here देखें।




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

कार्य उदाहरण




ऐसा करने के लिए एक शानदार लाइब्रेरी है जिसे मैंने हाल ही में खोजा था। इसका उपयोग करना आसान है और परिणाम काफी साफ है: डी 3-टिप।

आप bl.ocks.org/Caged/6476579 एक उदाहरण देख सकते हैं:

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

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

और फिर bl.ocks.org/Caged/6476579 से निर्देशों का पालन bl.ocks.org/Caged/6476579 (उदाहरण के समान लिंक)

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

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

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

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

var svg = ...

विधि को कॉल करें:

svg.call(tip);

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

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

सीएसएस जोड़ने के लिए मत भूलना:

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



बस इस कोड को प्रारंभिक खंड में रखें।

ToolTipService.ShowDurationProperty.OverrideMetadata(
    typeof(DependencyObject), new FrameworkPropertyMetadata(Int32.MaxValue));




tooltip mouseover d3.js