javascript - D3 Tooltip: Unable to get tooltip working -

i unable tooltip working in line chart. have tweaked code doesn't show me error. can me set tooltips in line chart?

below css , complete js code.

css:

div.tooltip {            position: absolute;                  text-align: center;                  white-space: normal;                             padding: 2px;                        font-size: 14px;                 background: whitesmoke;          border: 1px solid gray;          border-radius: 4px;                  pointer-events: none;         cursor: none;     } 

javascript:

$(document).ready(function() { var svg_co2_emission = d3.select("#svg_co2_emission"),     margin_co2_emission = {top: 20, right: 20, bottom: 30, left: 40},     width_co2_emission = +svg_co2_emission.attr("width") - margin_co2_emission.left - margin_co2_emission.right,     height_co2_emission = +svg_co2_emission.attr("height") - margin_co2_emission.top - margin_co2_emission.bottom,     g_co2_emission = svg_co2_emission.append("g").attr("transform", "translate(" + margin_co2_emission.left + "," + margin_world_population.top + ")");  var x_co2_emission = d3.scaleband()     .rangeround([0, width_co2_emission])     .padding(0.1)     .align(0.1); var y_co2_emission = d3.scalelinear()     .rangeround([height_co2_emission, 0]);  var line_co2_emission = d3.line()     .x(function(d) { return x_co2_emission(+d.year); })     .y(function(d) { return y_co2_emission(+d.total_emission); });  // tooltip var tt_co2_emission = d3.select("#svg_co2_emission").append("div")       .attr("class", "tooltip")            .style("opacity", 0);  d3.csv("t2_carbon_emission.csv", type, function(error, data_co2_emission) {   if (error) throw error;   x_co2_emission.domain(data_co2_emission.map(function(d) { return +d.year; }));   y_co2_emission.domain([0, d3.max(data_co2_emission, function(d) { return +d.total_emission; })]).nice();    g_co2_emission.append("g")       .attr("class", "axis axis--x")       .attr("transform", "translate(0," + height_co2_emission + ")")       .call(d3.axisbottom(x_co2_emission))       .selectall("text")                     .style("text-anchor", "end")                   .attr("dx", "-.8em")                   .attr("dy", ".15em")                   .attr("transform", "rotate(-65)" );;   g_co2_emission.append("g")       .attr("class", "axis axis--y")       .call(d3.axisleft(y_co2_emission).ticks(10, "s"))     .append("text")       .attr("x", 2)       .attr("y", y_co2_emission(y_co2_emission.ticks(10).pop()))       .attr("dy", "0.35em")       .attr("text-anchor", "start")       .attr("fill", "#000")       .text("co2: million metric tons of carbon per year.");    g_co2_emission.append("path")       .datum(data_co2_emission)       .attr("class", "line_world_population")       .attr("d", line_co2_emission);    // tooltip   g_co2_emission.on("mousemove", function(d) {     tt_co2_emission.html("&nbspin " + x_co2_emission + ", co2 emission <strong>" + y_co2_emission + "million metric tons</strong>.&nbsp")       .style('top', d3.event.pagey - 12 + 'px')       .style('left', d3.event.pagex + 25 + 'px')       .style("opacity", 0.95);   });    g_co2_emission.on("mouseout", function() {     tt_co2_emission.style("opacity", 0)   }); }); function type(d, i, columns) {   (i = 1, t = 0; < columns.length; ++i) t += d[columns[i]] = +d[columns[i]];   d.total = t;   return d; } }); 

it showing me error message d.year doesn't exist. if make change, not display error , still no tooltip.

thanks in advance....