Como passar o mouse para o Line Graph Interactive no D3
Eu sou novo no D3 e estava tentando criar um gráfico de linha interativo simples. Meu código atual:http://jsfiddle.net/9xske0m1/ é baseado em um encontrado em bl.ocks.org
Eu estava pensando em adicionar uma linha vertical como a aqui:http://bl.ocks.org/benjchristensen/2657838 mas com os valores das linhas exibidas como uma legenda ao passar o mouse, em vez de exibi-los na parte inferior do gráfico, e eu quando passar o mouse sobre uma linha. Então, eu queria saber como eu faria isso. Eu estou supondo que eu tenha adicionado algo aqui:
data = data.map( function (d) {
return {
CAUSES: d.CAUSES,
YEAR: parseDate(d.YEAR.toString()),
VALUE: +d.VALUE };
});
// then we need to nest the data on CAUSES since we want to only draw one
// line per CAUSES
data = d3.nest().key(function(d) { return d.CAUSES; }).entries(data);
x.domain([d3.min(data, function(d) { return d3.min(d.values, function (d) { return d.YEAR; }); }),
d3.max(data, function(d) { return d3.max(d.values, function (d) { return d.YEAR; }); })]);
y.domain([0, d3.max(data, function(d) { return d3.max(d.values, function (d) { return d.VALUE; }); })]);
// var path1 = svg.append("g").append("path").data([data1]).attr("class", "line1");
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
.call(xAxis);
svg.append("g")
.attr("class", "y axis")
.call(yAxis);
var causation = svg.selectAll(".CAUSES")
.data(data, function(d) { return d.key; })
.enter().append("g")
.attr("class", "CAUSES");
causation.append("path")
.attr("class", "line")
.attr("d", function(d) { return line(d.values); })
.style("stroke", function(d) { return color(d.key); });