How to use tool tip in Line bar graph using D3 js

Question

I am trying to use tool tip in line graph but i don't understand why tool-tip value is not coming.also i want when line graph is rendered, add round sign "o" in specific number.i mean add some circle symbol. please find below my scripts

    <script>
        function ShowLineChart() {

            var data = [
        { date: "1-jan-12", close: 5 },
        { date: "1-Feb-12", close: 100 },
        { date: "1-mar-12", close: 150 },
        { date: "1-apr-12", close: 90 },
        { date: "1-May-12", close:34 },
        { date: "1-jun-12", close: 67 },
        { date: "1-jul-12", close:67 },
        { date: "1-Aug-12", close: 79 }
    ];
            var margin = { top: 20, right: 20, bottom: 30, left: 50 },
    width = 460 - margin.left - margin.right,
    height = 200 - margin.top - margin.bottom;

            var parseDate = d3.time.format("%d-%b-%y").parse;

            var x = d3.time.scale()
    .range([0, width]);

            var y = d3.scale.linear()
    .range([height, 0]);

            var xAxis = d3.svg.axis()
    .scale(x)
    .orient("bottom");

            var yAxis = d3.svg.axis()
    .scale(y)
    .orient("left");

            var line = d3.svg.line()
    .x(function (d) { return x(d.date); })
    .y(function (d) { return y(d.close); });


            var tip = d3.tip()
  .attr('class', 'd3-tip')
  .offset([-10, 0])
  .html(function (d) {
      return "<strong>Price($):</strong> <span style='color:red'>" + d.close +"</span>";
  })

            var svg = d3.select("#showLineChart").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 + ")");
            svg.call(tip);

                data.forEach(function (d) {
                    d.date = parseDate(d.date);
                    d.close = +d.close;
                });

                x.domain(d3.extent(data, function (d) { return d.date; }));
                y.domain(d3.extent(data, function (d) { return d.close; }));

                svg.append("g")
      .attr("class", "x axis")
      .attr("transform", "translate(0," + height + ")")
      .call(xAxis);

                svg.append("g")
      .attr("class", "y axis")
      .call(yAxis)
    .append("text")
      .attr("transform", "rotate(-90)")
      .attr("y", 6)
      .attr("dy", ".71em")
      .style("text-anchor", "end")
      .text("Price ($)")

                svg.append("path")
      .datum(data)
      .attr("class", "line")
      .attr("d", line)
      .on('mouseover', tip.show)
      .on('mouseout', tip.hide)
      .attr("y", function (d) { return d.close; })


        }
</script>

Answer 1

I assume you are using the labratrevenge/d3-tip script to get tooltips like in here

This means you need to have elements to attach the tip.hide and tip.show callbacks to.

You can do this by adding circle points to the chart and attach the callbacks to these points:

svg.selectAll(".circle")
     .data(data)
     .enter()
     .append("svg:circle")
     .attr("class", "circle")
     .attr("cx", function (d) {
        return x(d.date);
     })
     .attr("cy", function (d) {
       return y(d.close);
     })
     .attr("r", 5)
     .on('mouseover', tip.show)
     .on('mouseout', tip.hide)

Have a look at it in action on jsfiddle.