Tooltip is not displaying in the exact position in D3.js code - javascript

Tooltip is not diaplying in the appropriate area.I'm using D3.js
var divLink = d3.select(el[0]).append("div")
.attr("class", "tooltip")
.style("opacity", 0);
.attr("id",function(d){
return d.linkID;})
.style("stroke-width", 0.7)
.style("fill", "none")
.on("mouseover", function(d) {
var dx = (d.x+30), dy = (d.y+155)-$('#svgWrapper').scrollTop();
divLink.transition()
.duration(200)
.style("opacity", .9);
// When links are hovered, tool tip is created
if(d.source.type.toLowerCase()=="rack" || d.target.type.toLowerCase()=="rack")
{
divLink.html("<b>Link Details: </b><br/><br/>"+"<b>Link Id: </b>"+d.linkID +"<br/>"
+"<b>Device1: </b>"+d.source.name+"<br/>"+ "<b>Device2: </b>"+d.target.name+"<br/>")
.style("left", (d3.event.pageX) + "px")
.style("top", (d3.event.pageY - 28) + "px");
}else{
divLink.html("<b>Link Details: </b><br/><br/>"+"<b>Link Id: </b>"+d.linkID +"<br/>"+"<b>Link Speed: </b>"+d.linkSpeed+"<br/>"
+"<b>Device1: </b>"+d.source.name+"<br/>"+ "<b>Ports at Device1: </b>"+d.sport+"<br/>"+"<b>Device2: </b>"+d.target.name+"<br/>"
+ "<b>Ports at Device2: </b>"+d.tport+"<br/>")
.style("left", (d3.event.pageX) + "px")
.style("top", (d3.event.pageY - 28) + "px");
}
})
.on("mouseout", function(d) {
divLink.transition()
.duration(500)
.style("opacity", 0);
});
Something is in the style, because of that i'm getting this error.
Actually i'm having one more tooltip for another tool there the tooltip is placing in the exact area.
var div = d3.select(el[0]).append("div")
.attr("class", "tooltip")
.style("opacity", 0);
// Device Node Creation
var node = svg.selectAll(".node")
.data(networkObject.nodes)
.enter()
.append("g")
.attr("id",function(d){return d.name;})
.attr("class","node")
.attr("transform", function(d) {
return "translate(" + d.x + "," + (d.y) + ")"; })
.on("mouseover", function(d) {
var dx = (d.x+30), dy = (d.y+155)-$('#svgWrapper').scrollTop();
div.transition()
.duration(200)
.style("opacity", .9);
// Tool tip when hovered on particular device node
if(d.type.toLowerCase()=="rack"){
div.html("<b>Rack Details: </b><br/><br/>"+"<b>Rack Id: </b>"+d.name +"<br/>"+"<b>TOR Switches: </b>"+d.tor+"<br/>"+"<b>Management Switches: </b>"+d.mgmt+"<br/>"+"<b>Hosts: </b>"+d.host+"<br/>"+"<b>Status: </b>"+d.errorst+"<br/>")
.style("left",dx + "px")
.style("top", dy + "px");
}else if(d.type.toLowerCase()=="switch" && d.role.toLowerCase()=="spine"){
div.html("<b>Switch Details: </b><br/><br/>"+"<b>Switch Id: </b>"+d.name +"<br/>"+ "<b>Role: </b>"+d.role+"<br/>"+"<b>IP Address: </b>"+d.ip+"<br/>"+"<b>Status: </b>"+d.errorst+"<br/>")
.style("left", dx + "px")
.style("top", dy + "px");
}else if(d.type.toLowerCase()=="switch"){
div.html("<b>Switch Details: </b><br/><br/>"+"<b>Switch Id: </b>"+d.name +"<br/>"+ "<b>Role: </b>"+d.role+"<br/>"+"<b>Rack: </b>"+d.rack+"<br/>"+"<b>IP Address: </b>"+d.ip+"<br/>"+"<b>Status: </b>"+d.errorst+"<br/>")
.style("left", dx + "px")
.style("top", dy + "px");
}else if(d.type.toLowerCase()=="host"){
div.html("<b>Host Details: </b><br/><br/>"+"<b>Host Id: </b>"+d.name +"<br/>"+"<b>Rack: </b>"+d.rack+"<br/>"+"<b>IP Address: </b>"+d.ip+"<br/>"+"<b>Status: </b>"+d.errorst+"<br/>")
.style("left", dx + "px")
.style("top", dy + "px");
}else if(d.type.toLowerCase()=="corporate"){
div.html("<b>Corporate Network</b><br/><br/>")
.style("left", dx + "px")
.style("top", dy + "px");
}
})
.on("mouseout", function(d) {
div.transition()
.duration(100)
.style("opacity", 0);
});

So actually i found the answer for this, i added the coordinates for the x and y. then the tooltip was working, I don't think, this should be a permanent solution for this.If anyone has any other answers please post that.Thanks
.style("left", (d3.event.pageX-460) + "px")
.style("top", (d3.event.pageY - 50) + "px");

Related

Javascript D3 position tooltip to chart

I try to build a tooltip like it is explained here:
D3 Tooltip Example
But I want to have a div as a tooltip.
Now I have the problem to position the div to the chat line.
My code:
var div = d3.select("#chart").append("div")
.attr("class", "tooltip")
.style("opacity", 0);
var path = svg.append("path") // Add the line path.
.data(data)
.attr("class", "line")
.attr("d", line(data));
var focus = svg.append("g")
.attr("class", "focus")
.style("display", "none");
focus.append("text")
.attr("x", 9)
.attr("dy", ".35em");
svg.append("rect")
.attr("class", "overlay")
.attr("width", width)
.attr("height", height)
.on("mouseover", function() {
focus.style("display", null);
})
.on("mouseout", function(d) {
div.transition()
.duration(50)
.style("opacity", 1e-6);
})
.on("mousemove", mousemove);
function mousemove() {
var x0 = x.invert(d3.mouse(this)[0]),
i = bisectDate(data, x0, 1),
d0 = data[i - 1],
d1 = data[i],
d = x0 - d0.date > d1.date - x0 ? d1 : d0;
//move focus around
focus.attr("transform", "translate(" + x(d.date) + "," + y(d.equity) + ")");
div.transition()
.duration(50)
.style("opacity", .9);
div.html("<strong><table><tr><th>Datum: </th><th>" + formatTime(d.date) + "</th></tr><tr><th>Equity:</th><th>" + Euro(d.equity) + "</th></tr></table></strong>")
// .style("left", (d3.event.pageX) + "px")
// .style("top", (d3.event.pageY - 1100) + "px");
;
}
The full example on Fiddle
Is it possible to position the div relatively to the svg line, where the mouse is?
Changing the div position using left and top is best for HTML tooltips: https://jsfiddle.net/da3nx51L/
div.transition()
.duration(50)
.style('left', d3.event.clientX + "px")
.style('top', d3.event.clientY + "px")
.style('display', 'inline-block')
.style("opacity", .9);
uncomment the last two lines, and remove the -1100 from the top
.style("left", (d3.event.pageX) + "px")
.style("top", (d3.event.pageY) + "px");

How can i draw multiple shapes on d3 javascript

Hi i want to demonstrate my dots on a map by 2 shapes: circle and rectangle. i use filter to separate my data into 2 parts: equal to 1 or equal to 0. But i just can demonstrate circles.
I just can demonstrate 1 rectangle althought my data has many rows that satify the condition. I see that the coordinate for rectangle is in my data's last row. Maybe the filter make the file's pointer go to last place? What wrong? Can you guys point out my problem?
My code
// draw circle dots
svg.selectAll(".dot")
.data(data).enter()
.append("circle")
.filter(function(d) { return d.class ==0})
.attr("class", "dot")
.attr("r", 3.5)
.attr("cx", xMap)
.attr("cy", yMap)
.style("fill", function(d) { return color(cValue(d));})
.on("mouseover", function(d) {
tooltip.transition()
.duration(200)
.style("opacity", .9);
tooltip.html(d.class1 + "<br/> (" + xValue(d)
+ ", " + yValue(d) + ")")
.style("left", (d3.event.pageX + 5) + "px")
.style("top", (d3.event.pageY - 28) + "px");
})
.on("mouseout", function(d) {
tooltip.transition()
.duration(500)
.style("opacity", 0);
});
//Draw rectangle dot
svg.selectAll(".rec")
.data(data).enter().append("rect")
.filter(function(d) { return d.class ==1})
.attr("class", "rec")
.attr("cx", xMap)
.attr("cy", yMap)
.attr("height", 30)
.attr("width", 30)
.style("fill", function(d) { return color(cValue(d));})
.on("mouseover", function(d) {
tooltip.transition()
.duration(200)
.style("opacity", .9);
tooltip.html(d.class1 + "<br/> (" + xValue(d)
+ ", " + yValue(d) + ")")
.style("left", (d3.event.pageX + 5) + "px")
.style("top", (d3.event.pageY - 28) + "px");
})
.on("mouseout", function(d) {
tooltip.transition()
.duration(500)
.style("opacity", 0);
});
my data.csv
tree house class class1
0.12804 0.25792 0 B
0.14595 0.33472 0 B
0.23117 0.48474 0 C
0.088995 0.25033 0 B
0.12231 0.40285 0 C
0.14204 0.28154 0 B
1.0284 0.02235 0 A
0.023085 0.38046 0 B
0.074772 0.43056 0 C
-0.046482 0.19074 0 B
0.10548 0.11783 0 B
0.21276 0.20738 0 B
-0.064076 0.089246 0 A
-0.029258 0.48967 0 C
0.1851 0.20177 0 B
0.029084 0.11508 1 B
0.10206 0.27658 1 B
0.11558 0.20622 1 B
0.15363 0.29544 1 B
-0.40068 0.94515 1 E
0.057977 0.26218 1 B
0.089279 0.39531 1 B

Tooltip in d3 js (Bullet charts)

d3.json("data.json", function(error, data) {
if (error) throw error;
var div = d3.select("body").append("div")
.attr("class", "tooltip")
.style("opacity", 0);
var svg = d3.select("body").selectAll("svg")
.data(data)
.enter().append("svg")
.attr("class", "bullet")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom).on("mouseover", function(d) {
div.transition()
.duration(200)
.style("opacity", .9);
div.html("Tooltip" + "<br/>" + d.measures);
})
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")")
.call(chart);
Getting below result:
Result what I am expecting:
Is there any error in my code or do I need to do things differently.
You will have to update the position of the tool-tip div on mouse over.
.on("mouseover", function(d) {
div.transition()
.duration(200)
.style("opacity", .9)
.style("left", (d3.event.pageX) + "px") //Set X
.style("top", (d3.event.pageY) + "px"); //Set Y
div.html("Tooltip" + "<br/>" + d.measures);
});

tooltip to show single element of group

I have a bar chart and I have text values at the end of each bar. What I would like to do is set text to invisible, and on mouseover I'd like it to show the number associated with the bar, at the magnitude of that bar. I'm having trouble figuring out how to do this in an efficient manner.
var tooltip = d3.select("body").append("div")
.style("position", "absolute")
.attr("class", "tooltip")
.style("opacity", 0);
var rect = svg.selectAll("rect")
.attr("class", "rect")
.data(dataset)
.enter()
.append("rect")
.attr("y", function(d,i){
return yScale(i);
})
.attr("x", 0)
.attr("width", function(d,i){
return xScale(d);
})
.attr("height", h/dataset.length)
.style("fill", function(d,i){
return colors(d);
})
.on("mouseover", function(d){
d3.select(this).style("opacity", 0.5)
tooltip.transition()
.duration(200)
.style("opacity", 1);
tooltip.html(d)
.style("left", d3.event.pageX + "px")
.style("top", d3.event.pageY + "px")
})
.on("mouseout", function(d){
d3.select(this).style("opacity", 1)
tooltip.transition()
.duration(500)
.style("opacity", 0)
});
Instead of mouseover and mouseout, I recommend doing it with $(this).hover and $(this).mousemove. Try something like this:
$(this).hover(
function() {
tooltip.transition()
.duration(200)
.style("opacity", 1)
// In order to trigger the magnitude or 'width' of the rect:
var rectWidth = $(this).attr("width");
}, function () {
tooltip.transition()
.duration(500)
.style("opacity", 1e-6)
}
);
/*$(this).mousemove(function(event) {
tooltip
.style("left", event.clientX + "px")
.style("top", event.clientY + "px")
});*/

d3 handling mouse events in charts

I am trying to make an interactive pie chart that reacts to mouse clicks. At the moment I made it possible for a tooltip to come up once a pie slice is clicked on. But how can I make it disappear if the user clicks again on the same slice?
.on("click", function(d) {
tooltip.transition()
.duration(450)
.style("opacity", 0.7);
tooltip.html("<b>" + d.name + ": " + d.value + "</b>")
.style("left", (d3.event.pageX) + "px")
.style("top", (d3.event.pageY-20) + "px");
});
If the data in your selection are objects, then you can store within each datum whether it's selected or not. For example,
.on("click", function(d, i) {
if (!d.selected){
tooltip.transition()
.duration(350)
.style("opacity", 0.9);
tooltip.html("<b>" + stats[i].status + ": " + d.value + "</b>")
.style("left", (d3.event.pageX) + "px")
.style("top", (d3.event.pageY-margin*0.8) + "px");
d.selected = true;
// deselect all other arcs
arcs.each(function(d, j){
if (i != j) d.selected = false;
});
}
else {
tooltip.transition()
.duration(200)
.style("opacity", 0);
d.selected = false;
}
});
Note that this ensures that all other arcs are deselected when you select a new arc.

Categories

Resources