Question

Я пытаюсь включить всплывающую подсказку, когда мышь находится на линии. Это текущие настройки, которые у меня есть:

HTML:

<div id="graphContainer"></div> 
<div id='hoveringTooltip' style='position:fixed;'></div> 

3d.js код - Основные настройки:

var width = 1200, 
height = 900; 

var svg = d3.select("#graphContainer").append("svg") 
.attr("width", width) 
.attr("height", height); 

var force = d3.layout.force() 
.charge(-120) 
.linkDistance(80) 
.size([width, height]); 

//Create all the line svgs but without locations yet 
var link = svg.selectAll(".link") 
    .data(graph.links) 
    .enter().append("line") 
    .attr("class", "link") 
    .style("stroke-width", function (link) { 
     return link.thick 
    }) 
    .attr("data-info", function (link) { 
     return link.info; 
    }) 
    .style("marker-end", "url(#suit)") 
    .on("mouseover", mouseOverLink) 



function mouseOverLink (e) { 
//d3.select(this).style("stroke","red"); 
d3.select(this).attr("class", "link_selected"); 
var that = this; 

var value = Number(this.attributes.x1.value); 

var xx = d3.select(this).attr("cx") + "px" 
var yy = d3.select(this).attr("cy") + "px" 
var xxx = d3.event.pageX; 
var yyy =  d3.event.pageY; 

var coordinates = [0, 0]; 
coordinates = d3.mouse(this); 
var x = coordinates[0]; 
var y = coordinates[1]; 


var value = this.attributes[1].value; 
$('#hoveringTooltip').show(); 
$('#hoveringTooltip').html(value); 
$('#hoveringTooltip').css({ 
    "top": xxx, 
    "left": yyy 
}); 
} 

В функции mouseOverLink, я перепробовал все сценарии, которые я мог бы найти на SO и в Интернете. Я получаю значения для мыши X/Y, но они всегда ошибочны. Я также попытался подключить ссылку mouseover с помощью JQuery eventing, но эти значения также неверны.

Если есть еще один способ отображения инструментария по ссылке, я был бы более счастлив.

Answer 1

Так как вы не сделали создайте рабочую скрипку, чтобы я смог сделать это с помощью принудительного движения Plunk.

Сначала дайте стиль для кончика инструмента DIV, как это:

div.tooltip { 
    position: absolute;// because we are going to give the position. 
    text-align: center; 
    width: 160px; 
    height: 50px; 
    padding: 2px; 
    font: 12px sans-serif; 
    background: lightsteelblue; 
    border: 0px; 
    border-radius: 8px; 
    pointer-events: none; 
} 

Следующая сделать DIV и добавить его к телу, как это:

var tooltip = d3.select("body").append("div") 
     .attr("class", "tooltip") 
     .style("opacity", 0);//so that its not visible initially 

В настоящее время на линии мыши над/мышь из do

var link = svg.selectAll(".link") 
     .data(graph.links) 
    .enter().append("line") 
     .attr("class", "link") 
     .on("mouseover", function (d, i) {//show tooltip 
     tooltip.transition() 
      .duration(200) 
      .style("opacity", 0.9); 
      tooltip.html("<p>source:"+d.source.name+ "</p><p>target:"+d.target.name+ "</p>")//tool tip html 
      .style("left", (d3.event.pageX) + "px") 
      .style("top", (d3.event.pageY - 28) + "px"); 

     }) 
     .on("mouseout", function (d) { 
      tooltip.transition() 
      .duration(500) 
      .style("opacity", 0);//hde tooltip 
      }) 

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

Наведите указатель мыши на ссылку, чтобы увидеть подсказку.

Answer 2

Моя первая мысль, если вы используете ХХХ и в правиле CSS стилей, вам нужно добавить «точек» до конца значения, как вы делаете для хх и уу