বৃত্তের মাউসওভারে ডেটা দেখান

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

আমি চেষ্টাও করেছি: ভিস.সलेक्ट অল ("সার্কেল")। প্রতিটি (ফাংশন (ডি) {ভিস.অ্যাপেন্ড ("এসভিজি: টেক্সট")। অ্যাটর ("এক্স", ডেক্স) .text (ফাংশন (d) {রিটার্ন ডেক্স;});}); হায় হায়!

— স্কটিবিবি

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 (একেবারে নীচে

— টিপসি

যে jsfiddle মনে হয় কোন সরঞ্জামদণ্ড আছে?

— লার্স কোথথফ

আপনি svg:gপ্রকৃত বৃত্তটি দিয়ে ওভারলেটি দিয়ে এই টুলটিপটি যুক্ত করার চেষ্টা করতে পারেন , তবে শূন্য প্রস্থ এবং উচ্চতা দিন। বর্তমানে এটি সীমানা বাক্সটি নিয়েছে এবং সরঞ্জামটিপটি প্রান্তে রাখছে। টিপসির বিকল্পগুলির সাথে চারপাশে খেলতে সহায়তা করতে পারে।

— লার্স কোথথফ

এটি আর কাজ করবে বলে মনে হয় না। এছাড়াও আমি এসজিজি

— nos

@Nos আমার জন্য কাজ করে।

— লার্স কোটথফ

Answer 2

একটি টুলটিপ তৈরি করার জন্য একটি দুর্দান্ত উপায় এখানে বর্ণনা করা হয়েছে: সাধারণ ডি 3 সরঞ্জামদণ্ডের উদাহরণ

আপনাকে একটি ডিভ যোগ করতে হবে

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

আপনি কি এই সরঞ্জামদণ্ডে ডেটা বাঁধতে পারেন?

— জর্জি লিটাও

আফাইক আপনি প্রতিটি ডিওএম-উপাদানগুলিতে ডেটা বাঁধতে পারেন।

— Pwdr

এটিকে ডেটা বেঁধে রাখতে, কেবল প্যারেন্সেসিসের মধ্যে d এর মতো যুক্ত করুন: ফাংশন (d) {... এবং আপনি যখন চান তখন টেক্সটটি পরিবর্তন করুন। উদাহরণস্বরূপ, বলুন যে এটির একটি নাম রয়েছে: টুলটিপ.টেক্সট (d.name):

— ওনিগুই

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

আপনার এসজিজি তৈরি করুন (যেমন আপনি ইতিমধ্যে করছেন)

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>

Comments

সর্বশেষতম ডি 3 -টিপ d3v4 সমর্থন করে ঠিক। আপনি চারপাশে গুগল দিলে এটি সুস্পষ্ট নয়, তবে এটি 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 () যা আপনার কোডে সংজ্ঞায়িত হয়নি। আমি মনে করি এটি সরানো যেতে পারে।

— রবার্ট

সেগুলিকে

— ওপিতে

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

Comments

কারও যদি অবজেক্টের অবস্থানের তুলনায় সরঞ্জাম-টিপ প্রয়োজন হয়। গাছের গ্রাফের ক্ষেত্রে পছন্দ করুন। আপনি ব্যবহার করতে চাইতে পারেন return tooltip.style("top", (d.x + 40) + "px") .style("left", (d.y + 80) + "px");মধ্যে 'mousemove'অ্যাট্রিবিউট। d.xইচ্ছা সাহায্যের বস্তু, না সমগ্র পৃষ্ঠায় টুল-টিপ আপেক্ষিক সরাতে

— চন্দ্র Kanth