CODEWITHSUNDEEP
javascriptd3.js
user2834030
user2834030

Reputation: 145

Displaying tooltips permanently in d3.js line chart

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); 
     });

Upvotes: 1

Views: 2446

Answers (1)

Lars Kotthoff
Lars Kotthoff

Reputation: 109272

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; });

Upvotes: 0

Related Questions