Come mostrare un suggerimento con valore quando si passa il mouse su un grafico a linee svg usando d3.js?

Question

Sto usando D3.js. Voglio mostrare un suggerimento con il corrispondente valore dell'asse Y quando topoover d3.svg.line().

Ho provato ad utilizzare questo codice:

d3.svg.line().append("title") 
    .text(function(d) { return d; });` 

ma getta errore non ha un metodo 'aggiungere'. C'è un altro modo?

Answer 1

d3.svg.line() è un generatore di linee; non è l'elemento di linea attuale. Questa funzione è progettata per funzionare con un generatore di area, sebbene sia possibile disabilitare l'aspetto della forma all'interno utilizzando "riempimento: nessuno". Per informazioni più dettagliate, ecco un link alla sua documentazione: https://github.com/mbostock/d3/wiki/SVG-Shapes#wiki-line.

Il codice seguente crea un elemento di percorso utilizzando il generatore d3.svg.line() e quindi aggiunge una descrizione comando al percorso che genera. L'attributo di testo di questo titolo mostra il valore y dovunque si trovi il mouse. Questo viene fatto usando l'evento del mouse "mousemove" che sembra essere più quello che vuoi invece di usare "mouseover". (Passaggio del mouse richiede di muoversi dentro e fuori della forma per aggiornare il valore di testo, mentre MouseMove cambierà il valore anche se il mouse si sposta lungo la linea.)

var data = [[{x:100, y:200}, {x:0,y:400}, {x:2, y:300}]]; 


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

var svg = d3.select("body").append("svg:svg") 
      .attr("width", 400) 
      .attr("height", 400); 

var g = svg.selectAll("g").data(data).enter().append("svg:g") 
          .attr("width", 400) 
          .attr("height", 400); 

g.append("path") 
    .attr("d", line) 
    .attr("id", "myPath") 
    .attr("stroke", "black") 
    .attr("stroke-width", 5) 
    .attr("fill", "none") // Remove this part to color the 
          // shape this path produces 
    .on("mousemove", mMove) 
    .append("title"); 

function mMove(){ 

    var m = d3.svg.mouse(this); 
    d3.select("#myPath").select("title").text(m[1]); 
} 

Answer 2

C'è stato un piccolo errore nella risposta.

d3.svg.mouse(this) 

non funziona.

La risposta corretta è

d3.mouse(this)