У меня есть набор данных, которые я строю в разбросе. При наведении курсора мыши на один из кругов я хотел бы, чтобы он всплывал с данными (такими как значения 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
элемент к каждому кругу, так как браузер позаботится о том, чтобы показать всплывающую подсказку, а манипулятор мыши вам не понадобится. Код будет что-то вродеЕсли вы хотите более интересные подсказки, вы можете использовать, например, tipy. Смотрите здесь для примера.
источник
svg:g
который вы накладываете на фактический круг, но задаете нулевую ширину и высоту. В настоящее время он берет ограничивающий прямоугольник и помещает всплывающую подсказку по краю. Игра с опциями типси может также помочь.Очень хороший способ создания всплывающей подсказки описан здесь: Простой пример всплывающей подсказки D3
Вы должны добавить div
Тогда вы можете просто переключить его с помощью
d3.event.pageX
/d3.event.pageY
- текущая координата мыши.Если вы хотите изменить текст, вы можете использовать
tooltip.text("my tooltip text");
Рабочий пример
источник
Для этого есть потрясающая библиотека, которую я недавно обнаружил. Он прост в использовании, и результат довольно аккуратный: d3-tip.
Вы можете увидеть пример здесь :
По сути, все, что вам нужно сделать, это загрузить ( index.js ), включая скрипт:
и затем следуйте инструкциям отсюда (та же ссылка, что и в примере)
Но для вашего кода это будет что-то вроде:
определить метод:
создайте свой SVG (как вы уже делаете)
вызвать метод:
добавить подсказку к вашему объекту:
Не забудьте добавить CSS:
источник
Вы можете передать данные, которые будут использоваться при наведении мыши, следующим образом: событие mouseover использует функцию с ранее
enter
отредактированными данными в качестве аргумента (и индекс в качестве второго аргумента), поэтому вам не нужно использоватьenter()
второй раз.источник
d3.select(this)
было изменить форму и я не знал, как получить экземпляр при вводе / обновлении.Этот краткий пример демонстрирует общий способ создания настраиваемой подсказки в d3.
источник
return tooltip.style("top", (d.x + 40) + "px") .style("left", (d.y + 80) + "px");
в'mousemove'
атрибуте.d.x
Поможет переместить инструмент наконечниками относительно объекта, а не вся страница