在d3.js中的动态折线图中添加工具提示

Question

任何人都可以帮我在d3.js

的折线图中添加工具行程

这是我到目前为止所做的：

我的Javascript：

var n = 40;
random = d3.random.normal(0, .2),
data = [-2.0236589]; // d3.range(n).map(random);
//alert(data);

var margin = {
  top: 20,
  right: 20,
  bottom: 20,
  left: 40
},
width = 960 - margin.left - margin.right,
  height = 500 - margin.top - margin.bottom;

var x = d3.scale.linear()
  .domain([1, n - 2])
  .range([0, width]);

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

var line = d3.svg.line()
  .interpolate("basis")
  .x(function (d, i) {
  return x(i);
})
  .y(function (d, i) {
  return y(d);
});

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 + ")");

svg.append("defs").append("clipPath")
  .attr("id", "clip")
  .append("rect")
  .attr("width", width)
  .attr("height", height);

svg.append("g")
  .attr("class", "x axis")
  .attr("transform", "translate(0," + y(0) + ")")
  .call(d3.svg.axis().scale(x).orient("bottom"));

svg.append("g")
  .attr("class", "y axis")
  .call(d3.svg.axis().scale(y).orient("left"));

var path = svg.append("g")
  .attr("clip-path", "url(#clip)")
  .append("path")
  .datum(data)
  .attr("class", "line")
  .attr("d", line);

tick();

function tick() {
  // alert(data);
  // random();
  //  console.log(data);
  // push a new data point onto the back
  data.push(random());
  //random();
  // redraw the line, and slide it to the left
  path.attr("d", line)
  // .attr("d", valueline(data))
  .attr("transform", null)
      .transition()
      .duration(500)
      .ease("linear")
      .attr("transform", function (data) {
      return data.length > 40 ? "translate(" + x(0) + ",0)" : "translate(0)"
  })
      .each("end", tick);

  // pop the old data point off the front
  //alert(data.length);
  if (data.length > 40) {
      //alert(data.length);
      data.shift();
  }

}

CSS：

svg {
    font: 10px sans-serif;
}

.line {
    fill: none;
    stroke: #000;
    stroke-width: 1.5px;
}

.axis path,
.axis line {
    fill: none;
    stroke: #000;
    shape-rendering: crispEdges;
}

JSFiddle链接：http://jsfiddle.net/RajuSahoo/ug6v86cc/1/