javascript - Displaying tooltips permanently in d3.js line chart -
i'm making line chart using d3.js. tooltip @ point displayed on mouseover,and disappears on mouseout. want display tooltips permanently when chart created. there way 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, can add text elements @ appropriate positions. code 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; });
Comments
Post a Comment