Display tooltip close to the mouse pointer using d3.js in a scatter plot
107 views
Skip to first unread message
Alessandro Capuani
Oct 11, 2015, 5:46:22 AM10/11/15
to d3-js
Hello guys,
I am trying to make a scatter plot of the iris data set using d3.js. I have some problem displaying the tooltip close to the mouse pointer. Using the following code, the tooltip would be showed on the bottom of the x axis.
<!DOCTYPE html><meta charset="utf-8"><style>body { font: 12px Arial;}
path { stroke: black; stroke-width: 10; fill: none;}
.axis path,.axis line { fill: none; stroke: black; stroke-width: 1; shape-rendering: crispEdges;}
.area { fill: none; clip-path: url(#clip);}
.dot{ fill: #000; opacity: 0.2; }div.tooltip { position: absolute; text-align: center; width: 60px; height: 28px; font: 12px sans-serif; background: lightsteelblue; pointer-events: none; }</style>
<body><script src = "http://d3js.org/d3.v3.js"> </script>
<script>
var margin = {top:30,right:40,bottom:30,left:50}, width = 800 - margin.left - margin.right, height = 470 - margin.top - margin.bottom;
var x = d3.scale.linear().range([0,width]), y = d3.scale.linear().range([height,0]);
var labels = d3.scale.category10();
var xAxis = d3.svg.axis().scale(x).orient("bottom") .ticks(5), yAxis = d3.svg.axis().scale(y).orient("left") .ticks(5);
var svg = d3.select("body") .append("svg") .attr("width", width + margin.left + margin.right) .attr("height", height + margin.top + margin.bottom) .append("g") .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
var div = d3.select("body").append("div") .attr("class", "tooltip") .style("opacity",0);
d3.csv("iris.csv", function(error, data){ x.domain(d3.extent(data,function(d){return +d.sepal_length;})); y.domain([0,d3.max(data,function(d){return +d.sepal_width})]);
// x axis svg.append("g") .attr("class","x axis") .attr("transform", "translate(0," + height + ")") .call(xAxis) .append("text") .attr("class", "label y") .attr("x", width) .attr("y", -7) .style("text-anchor", "end") .text("sepal_length");
//y axis svg.append("g") .attr("class", "y axis") .call(yAxis) .append("text") .attr("class", "label y") .attr("y",-26) .attr("transform", "rotate(-90)") .style("text-anchor", "end") .text("sepal_width");
//clip path svg.append("defs").append("clipPath") .attr("id","clip") .append("rect") .attr("x",5) .attr("y",5) .attr("width", width -5) .attr("height",height-5);
// add points svg.append("g") .attr("id","circles") .attr("clip-path","url(#clip)") .selectAll("circle") .data(data) .enter() .append("circle") .attr("class", "dot") .attr("cx", function(d){return x(+d.sepal_length);}) .attr("cy", function(d){return y(+d.sepal_width);}) .attr("r", function(d){return +d.petal_width*2;}) .style("fill", function(d){return labels(d.species);}) .on("mouseover", function(d){ div.transition() .duration(200) .style("opacity", .9); div.html(d.species) .style("left", (d3.event.pageX - 50)+"px") .style("right",(d3.event.pageY - 250)+"px"); }) .on("mouseout",function(d){ div.transition() .duration(500) .style("opacity",0); });
var legend = svg.selectAll(".legend") .data(labels.domain()) .enter().append("g") .attr("class", "legend") .attr("transform", function(d,i) {return "translate(0," + i * 20 + ")";});
legend.append("rect") .attr("x", width -18) .attr("width",18) .attr("height",18) .style("fill", labels);
legend.append("text") .attr("x",width - 24) .attr("y", 12) .style("text-anchor", "end") .text(function(d) { return d; });
});
</script></body>Do you have any idea how can I solve the problem?
Thank you very much!!
Ashish Tomar
Dec 4, 2015, 1:04:19 PM12/4/15
to d3-js
Hi Alessandro,
try changing the value after d3.event.pageX - in below lines
I cannot test it because i don't have the data file.
Hope it works....
.style("left", (d3.event.pageX - 50)+"px")
.style("right",(d3.event.pageY - 250)+"px");
cheers...
Reply all
Reply to author
Forward
0 new messages