I want to add tooltip to this chart.
I am referring to this and this example
The issue is that their are no unique points on the line in the SVG it just has the path tag.
svg.selectAll("dot")
.data(data)
.enter().append("circle")
.attr("r", 5)
.attr("cx", function(d) { return x(d.date); })
.attr("cy", function(d) { return y(d.close); })
.on("mouseover", function(d) {
div.transition()
.duration(200)
.style("opacity", .9);
div .html(formatTime(d.date) + "<br/>" + d.close)
.style("left", (d3.event.pageX) + "px")
.style("top", (d3.event.pageY - 28) + "px");
})
.on("mouseout", function(d) {
div.transition()
.duration(500)
.style("opacity", 0);
});
Like the above code selects the dot on the SVG but I dont have any specific element to bind the tooltip.
Can any one help me in this as I am new to d3.js.
you should take d.value for y:
.attr("cy", function(d) { return y(d.value); })
and now append new element on mouseover:
.on("mouseover", function(d) {
svg.append("text")
.text(d.value)
.attr('class', 'tooltip').style("font-size","10px")
.attr("x", x(d.date))
.attr("y", y(d.value))
.attr('fill', 'red');
})
.on("mouseout", function(d) {
d3.selectAll('.tooltip').remove();
});
Related
I have a d3 line chart with a tooltip, I am facing a problem with a tooltip.
I have functionality, on click of points/circle I am appending rect to g, which is adding on top of the existing rect which has the tooltip functionality.
My tooltip is not coming at selected(rect) Graph Point.
g.append("rect")
.attr("class", "overlay")
.attr("id", "firstLayer")
.attr("width", width)
.attr("height", height)
.on("mouseover", function(d) {
focus.style("display", null);
div
.transition()
.duration(200)
.style("opacity", 0.9);
})
.on("click", function(d, index) {
let newXScale = newX ? newX : xScale;
if (rect) rect.remove();
rect = g
.append("rect")
.attr("x", newXScale(d.startTime) - 12.5)
.attr("y", 0)
.attr("width", 24)
.attr("height", height + 5)
.attr("data", d.startTime)
.style("fill", "steelblue")
.style("opacity", 0.5);
if (clickLine) clickLine.remove();
clickLine = g
.append("line")
.attr("x1", newXScale(d.startTime))
.attr("y1", yScale(yDomain[0]))
.attr("x2", newXScale(d.startTime))
.attr("y2", yScale(yDomain[1]))
.attr("class", "focusLine")
.style("opacity", 0.5);
})
rect element is coming on top of the gm on hover of that tooltip is not coming, any suggestions on how to fix it ?
On mouse hover -
At selected Graph Point -
CodeSandbox link below -
https://codesandbox.io/s/damp-dawn-82hxc
Please guide me what can be changed.
on click of the circle you are appending another rectangle to g, which is adding on top of the existing rect which has the tool tip functionality
Note: d3 js adds layer/shape on top of another which basically overrides the existing layer/shape functionality with the new layer/shape if they are in the same position
To avoid that we have to draw the layers depends on their intended purpose and position.
Solution for the above problem
append background rects for circle you want to create with opacity: 0
g.selectAll(".faaa")
.data(data)
.enter()
.append("rect")
.attr("class", "faaa")
.attr("id", d => "rect_" + d.id)
.attr("x", d => xScale(d.startTime) - 12.5)
.attr("y", 0)
.attr("width", 24)
.attr("height", height + 5)
.attr("data", d => d)
.style("fill", "steelblue")
.style("opacity", 0);
append firstLayer rect which has the tooltip functionality so the background rect won't break the tooltip functionality
g.append("rect")
.attr("class", "overlay")
.attr("id", "firstLayer")
.attr("width", width)
.attr("height", height)
.on("mouseover", function(d) {
focus.style("display", null);
div
.transition()
.duration(200)
.style("opacity", 0.9);
})
.on("mouseout", function() {
focus.style("display", "none");
div
.transition()
.duration(300)
.style("opacity", 0);
})
.on("mousemove", function() {
var mouse = d3.mouse(this);
var mouseDate = xScale.invert(mouse[0]);
var i = bisectDate(data, mouseDate); // returns the index to the current data item
var d0 = data[i - 1];
var d1 = data[i];
let d;
// work out which date value is closest to the mouse
if (typeof d1 !== "undefined") {
d = mouseDate - d0.startTime > d1.startTime - mouseDate ? d1 : d0;
} else {
d = d0;
}
div
.html(
`<span>${parseDate(d.startTime)}</span>
<span> Changes : ${d.magnitude} % </span>`
)
.style("left", d3.event.pageX + "px")
.style("top", d3.event.pageY - 28 + "px");
var x = xScale(d.startTime);
var y = yScale(d.magnitude);
focus
.select("#focusCircle")
.attr("cx", x)
.attr("cy", y);
focus
.select("#focusLineX")
.attr("x1", x)
.attr("y1", yScale(yDomain[0]))
.attr("x2", x)
.attr("y2", yScale(yDomain[1]));
focus
.select("#focusLineY")
.attr("x1", xScale(xDomain[0]))
.attr("y1", y)
.attr("x2", xScale(xDomain[1]))
.attr("y2", y);
});
append circle and add click functionality then change the opacity to highlight the background rect
g.selectAll(".foo")
.data(data)
.enter()
.append("circle")
.attr("id", d => d.id)
.attr("class", "foo")
.attr("data", d => d)
.attr("cx", function(d) {
return xScale(d.startTime);
})
.attr("cy", function(d) {
return yScale(d.magnitude);
})
.attr("r", function(d) {
return 6;
})
.on("click", function(d) {
// change the opacity here
d3.select("#rect_" + d.id).style("opacity", 0.5);
})
.attr("class", "circle");
Hope this solves the above problem...
This is my code look like, you can also have full code on JsFiddle .
I want to have labels on every node, but I can't.
By the way, labels can be embedded in the circle in the console.
var nodes = svg.selectAll("circle")
.data(dataset.nodes)
.enter()
.append("circle")
.attr("r", 10)
.style("fill", function(d, i){
return colors(i);
})
.call(force.drag);
var label = nodes.append("svg:text")
.text(function (d) { return d.name; })
.style("text-anchor", "middle")
.style("fill", "#555")
.style("font-family", "Arial")
.style("font-size", 12);
force.on("tick", function(){
edges.attr("x1", function(d){ return d.source.x; })
.attr("y1", function(d){ return d.source.y; })
.attr("x2", function(d){ return d.target.x; })
.attr("y2", function(d){ return d.target.y; });
nodes.attr("cx", function(d){ return d.x; })
.attr("cy", function(d){ return d.y; });
label.attr("x", function(d){ return d.x; })
.attr("y", function (d) {return d.y - 10; });
});
Right now, you are appending the text elements to the circle elements, and that simply won't work.
When you write...
var label = nodes.append("svg:text")
You're appending the texts to the nodesselection. However, you have to keep in mind what nodes is:
var nodes = svg.selectAll("circle")
.data(dataset.nodes)
.enter()
.append("circle")
Thus, you are appending the texts to circles, and that doesn't work. They show up when you inspect the page (as <circle><text></text></circle>), but nothing will actually show up in the SVG.
Solution: just change to:
var label = svg.selectAll(null)
.data(dataset.nodes)
.enter()
.append("text")
.text(function (d) { return d.name; })
.style("text-anchor", "middle")
.style("fill", "#555")
.style("font-family", "Arial")
.style("font-size", 12);
Here is the fiddle: https://jsfiddle.net/gerardofurtado/7pvhxfzg/1/
I have a scatter plot similar to: http://plnkr.co/edit/MkZcXJPS7hrcWh3M0MZ1?p=preview
I want to give a tooltip on mouse hover for every combination. The tooltip code that i have currently does like:
var tooltip = d3.select("body").append("div") // tooltip code
.attr("class", "tooltip")
.style("opacity", 0);
var circles = svg.selectAll(".dot")
.data(data)
.enter().append("circle")
.attr("class", "dot")
.attr("r", 3.5)
.attr("cx", function(d) { return x(d.petalWidth); })
.attr("cy", function(d) { return y(d.petalLength); })
.style("fill", function(d) { return color(d.species); })
.on("mouseover", function(d) {
tooltip.transition()
.duration(200)
.style("opacity", 1.0);
tooltip.html(d.petalLength+", "+d.petalWidth)
.style("left", (d3.event.pageX + 5) + "px")
.style("top", (d3.event.pageY - 18) + "px");
})
.on("mouseout", function(d) {
tooltip.transition()
.duration(500)
.style("opacity", 0);
});
This will fail to return the correct tooltip for combinations other than petalWidth and d.petalLength.
Is there any way of knowing which combination has been selected and the associated numerical value for the combination?
To do this:
First store the tool-tip info in a new variable(displayX/displayY) like this:
.attr("cx", function(d) {
d.displayX = d.petalWidth;//so displayX holds the x info
return x(d.petalWidth);
})
.attr("cy", function(d) {
d.displayY = d.petalLength;//so displayY holds the y info
return y(d.petalLength);
})
When you set the combo reset the variables accordingly.
svg.selectAll(".dot").transition().attr("cy", function(d) {
d.displayY = d[yAxy];//reset the variable displayY
return y(d[yAxy]);
});
Same for
svg.selectAll(".dot").transition().attr("cx", function(d) {
d.displayX = d[xAxy];//reset the variable displayX
return x(d[xAxy]);
});
Now in the tool tip mouse hover use variable(displayX/displayY)
.on("mouseover", function(d) {
tooltip.transition()
.duration(200)
.style("opacity", 1.0);
tooltip.html(d.displayY + ", " + d.displayX)//use displayX and displayY
.style("left", (d3.event.pageX + 5) + "px")
.style("top", (d3.event.pageY - 18) + "px");
})
.on("mouseout", function(d) {
tooltip.transition()
.duration(500)
.style("opacity", 0);
});
working code here
Hope this helps!
I am wondering why doing the following is not possible:
div.text(function(d) {return " bought " + d.USD;})
It works fine for the either red or green circles earlier in the code:
.style("fill", function(d) {if (d.USD <= 0) {return "green"}
else { return "red" };})
Here is the extract of my code responsible for drawing the circles and adding a tooltip:
// Draw circle around values
svg.selectAll("dot")
.data(bitstamp_data)
.enter().append("circle")
.attr("r", function(d) { return Math.sqrt(Math.abs(d.USD)) - 5; })
.attr("cx", function(d) { return x(d.date); })
.attr("cy", function(d) { return y(d.Price); })
.style("fill-opacity", 0.7)
.attr("stroke", "black")
// Show different colour depending on buying or selling USD based on positive or negative d.USD
.style("fill", function(d) {
if (d.USD <= 0) {return "green"}
else { return "red" }
;})
// Tooltip section
.on("mouseover", function(d) {
div.transition()
.duration(400)
.style("opacity", .9);
div.text(function(d) {return " bought " + d.USD
;})
.style("left", (d3.event.pageX + 15) + "px")
.attr("stroke", "black")
.style("top", (d3.event.pageY - 28) + "px");
})
I'm making a line chart using d3.js. A tooltip at a point is displayed on mouseover,and disappears on mouseout. I want to display all the tooltips together permanently when the chart is created. Is there a way to do it?
My javascript-
var x = d3.time.scale().range([0, w]);
var y = d3.scale.linear().range([h, 0]);
x.domain(d3.extent(data, function(d) { return d.x; }));
y.domain(d3.extent(data, function(d) { return d.y; }));
var line = d3.svg.line()
.x(function(d) {
return x(d.x);
})
.y(function(d) {
return y(d.y);
})
var div = d3.select("body").append("div")
.attr("class", "tooltip")
.style("opacity", 0);
var graph = d3.select("#graph").append("svg:svg")
.attr("width", 900)
.attr("height", 600)
.append("svg:g")
.attr("transform", "translate(" + 80 + "," + 80 + ")");
var xAxis = d3.svg.axis().scale(x).ticks(10).orient("bottom");
var yAxisLeft = d3.svg.axis().scale(y).ticks(10).orient("left");
var area = d3.svg.area()
.x(function(d) { return x(d.x); })
.y0(h)
.y1(function(d) { return y(d.y); });
graph.selectAll("circle")
.data(data)
.enter()
.append("circle")
.attr("class", "circle")
.attr("cx", function (d) { return x(d.x); })
.attr("cy", function (d) { return y(d.y); })
.attr("r", 4.5)
.style("fill", "black")
.on("mouseover", function(d) {
div.transition()
.duration(200)
.style("opacity", .9);
div
.html(d.y) + "<br/>" + d.x)
.style("left", (d3.event.pageX) + "px")
.style("top", (d3.event.pageY - 30) + "px");
})
.on("mouseout", function(d) {
div.transition()
.duration(500)
.style("opacity", 0);
});
To label each data point, you can add text elements at the appropriate positions. The code would look something like this.
graph.selectAll("text").data(data).enter()
.append("text")
.attr("x", function (d) { return x(d.x); })
.attr("y", function (d) { return y(d.y) - 10; })
.text(function(d) { return d.value; });