Показати дані при переході миші на коло


162

У мене є набір даних, які я будую у розкиданні. Коли я перекладаю курсор миші на одне з кіл, я хотів би, щоб він з'явився з даними (наприклад, значення 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);}); });

Я підозрюю, що мені потрібно бути більш інформативним щодо того, які дані потрібно ввести?


1
Я також спробував: vis.selectAll ("коло"). Кожен (функція (d) {vis.append ("svg: текст"). Attr ("x", dx) .attr ("y", dy) .text (функція (d) {return dx;});}); безрезультатно.
ScottieB

Відповіді:


181

Я припускаю, що те, що ви хочете, є підказкою. Найпростіший спосіб зробити це - додати svg:titleелемент до кожного кола, оскільки браузер подбає про те, щоб показати підказку, і вам не потрібен маніпулятор миші. Код був би щось на кшталт

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

Якщо ви хочете більш химерні підказки, ви можете, наприклад, використовувати підказки. Дивіться тут приклад.


3
Мені подобається підказки. Єдине моє питання зараз - це те, що він вказує на верхній лівий кут кола, а не на край, як у демонстраційній версії. Я не знаходжу жодної очевидної причини, чому. jsfiddle.net/scottieb/JwaaV ( підказки в самому низу)
ScottieB

Здається, що у jsfiddle немає підказок?
Ларс Коттофф

Ви можете спробувати додати підказку до svg:gперекриття фактичним колом, але надати нульову ширину та висоту. Наразі він бере обмежувальний ящик і ставить підказку на край. Також може допомогти пограти з підказками.
Ларс Коттхофф

1
Здається, це вже не працює. Також я знайшов приклад, використовуючи svg: title, який не вдається: bl.ocks.org/ilyabo/1339996
nos

1
@nos працює для мене.
Ларс Коттхофф

145

Справді хороший спосіб зробити підказку описаний тут: Простий приклад підказки D3

Ви повинні додати діл

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

Робочий приклад


4
Чи можете ви прив’язати дані до цієї підказки?
Хорхе Лейтао

2
Afaik ви можете прив'язувати дані до кожного DOM-елемента.
Pwdr

щоб прив’язати дані до цього, просто додайте d все до дужок так: функція (d) {... і змініть текст на те, що вам завгодно. Наприклад, скажіть, що у вас є ім'я, це було б: tooltip.text (d.name):
thatOneGuy

39

Існує дивовижна бібліотека для того, що я нещодавно виявив. Користуватися просто, і результат досить акуратний: d3-tip.

Приклад ви можете побачити тут :

введіть тут опис зображення

В основному, все, що вам потрібно зробити, це завантажити ( 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>

2
Останній d3-наконечник добре підтримує d3v4. Це не очевидно, якщо ви гуглитеся навколо, але це добре працює для мене з d3v4.
moodboom

6

Ви можете передавати дані, які будуть використовуватися в курсорі миші, як це - подія миші використовує функцію з попередньо 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)); 
});

Дякую. Мені справді потрібні d3.select(this)були змінити форму, і я не знав, як отримати екземпляр для введення / оновлення.
Турбо

Ви використовуєте деякі функції x () та y (), які не визначені у вашому коді. Я думаю, що це можна зняти.
Роберт

їх передали в ОП
дамальний

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>


Якщо комусь потрібна підказка інструменту для переміщення відносно положення об’єкта. Як і у випадку з деревом графіка. Ви можете використовувати return tooltip.style("top", (d.x + 40) + "px") .style("left", (d.y + 80) + "px");в 'mousemove'атрибуті. Допомога d.xдопоможе перемістити підказку щодо інструменту відносно об’єкта, а не всієї сторінки
Чандра Кант
Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.