andriatz andriatz - 1 year ago 183
Javascript Question

d3.js change color and size on line graph dot on mouseover

I made a line graph with d3.js (see the attached image1).

I managed to insert tooltips on graph dots when mouseover.
I'd like to change color and size of dots too. I tried in many ways but it seems really difficult. Any help?
Here is the piece of code:

.attr("r", 5.5)
.style("fill", "#fff8ee")
.style("opacity", .8) // set the element opacity
.style("stroke", "#f93") // set the line colour
.style("stroke-width", 3.5)
.attr("cx", function(d) { return x(; })
.attr("cy", function(d) { return y(d.close); })
.on("mouseover", function(d) {

.style("opacity", .7)

div .html(formatTime( + "<br/>" + d.close)
.style("left", (d3.event.pageX) + "px")
.style("top", (d3.event.pageY - 28) + "px");
.on("mouseout", function(d) {
.style("opacity", 0);

Answer Source

Just set color and size in the handlers:

.on("mouseover", function(d) {"r", 10).style("fill", "red");
.on("mouseout", function(d) {"r", 5.5).style("fill", "#fff8ee");
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download