Показывать данные о наведении указателя на круг

У меня есть dataset, которые я рисую в разбросе. Когда я нажимаю одну из кругов, мне бы хотелось, чтобы она всплывала с данными (например, значениями x, y, может быть, больше). Вот что я пытался использовать:

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

Я подозреваю, что мне нужно быть более информативным о том, какие данные нужно вводить?

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

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

Если вам нужны более привлекательные всплывающие подсказки, вы можете использовать подвыпители, например. См. Здесь пример.

Здесь очень хороший способ создания всплывающей подсказки: простой пример подсказки D3

Вы должны добавить 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");

Рабочий пример

Для этого есть замечательная библиотека, которую я недавно обнаружил. Он прост в использовании, и результат довольно опрятный: d3-tip.

Здесь вы можете увидеть пример:

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

В принципе, все, что вам нужно сделать, это загрузить ( index.js ), включить скрипт:

  

и затем следуйте инструкциям отсюда (такая же ссылка, как пример)

Но для вашего кода это будет примерно так:

определите метод:

 var tip = d3.tip() .attr('class', 'd3-tip') .offset([-10, 0]) .html(function(d) { return "Frequency: " + d.frequency + ""; }) 

создайте свой svg (как вы уже это сделали)

 var svg = ... 

вызовите метод:

 svg.call(tip); 

добавьте подсказку к своему объекту:

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

Не забудьте добавить CSS:

  

Вы можете передать данные, которые будут использоваться в наведении мыши, как это: событие mouseover использует функцию с вашими ранее enter данными в качестве аргумента (и индекс как второй аргумент), поэтому вам не нужно использовать enter() второй раз.

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

Этот краткий пример демонстрирует общий способ создания пользовательской подсказки в 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; } 
  
Interesting Posts

Общие правила обозначения имен параметров для Java (с несколькими символами)?

Использование PowerShell для записи файла в UTF-8 без спецификации

Как конвертировать .crt в .pem

Печать html-документа из Windows Service без диалога печати

Что делает ключевое слово `forall` в Haskell / GHC?

Как добиться правильной резьбы на Thunderbird?

прозрачная панель действий с AppCompat-v7 21

API-вызов для получения архитектуры процессора

Почему мой Mac стал настолько медленным? (И как мне начать отвечать на это?)

Установите Chromium для автоматического перевода всех языков

Направление пользователя в дочернее состояние при переходе в его родительское состояние с использованием UI-Router

Получение URL-адреса профиля профиля Google+ с помощью user_id

Фотосъемка с программным обеспечением на Android

CALayer: добавить границу только с одной стороны

Алгоритм Nice Label для диаграмм с минимальными тиками

Давайте будем гением компьютера.