Jak wyświetlić etykietę z wartością po najechaniu kursorem na liniowy wykres svg przy użyciu d3.js?

Question

Używam D3.js. Chcę wyświetlić etykietę narzędzia z odpowiednią wartością osi Y, gdy najecham na mysz d3.svg.line().

Próbowałem za pomocą tego kodu:

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

ale zgłasza błąd ma metody dołączania ''. Czy jest jakiś inny sposób?

Answer 1

d3.svg.line() to generator linii; nie jest faktycznym elementem linii. Ta funkcja jest przeznaczona do pracy z generatorem obszaru, ale można wyłączyć wygląd kształtu za pomocą "wypełnienia: brak". Aby uzyskać bardziej szczegółowe informacje, tutaj znajduje się link do jego dokumentacji: https://github.com/mbostock/d3/wiki/SVG-Shapes#wiki-line.

Poniższy kod tworzy element ścieżki za pomocą generatora d3.svg.line(), a następnie dodaje etykietę narzędzia do ścieżki, którą generuje. Atrybut tekstowy tego tytułu pokazuje wartość y tam, gdzie znajduje się mysz. Odbywa się to za pomocą zdarzenia myszy "mousemove", które wydaje się być bardziej tym, czego chcesz zamiast "mouseover". (Po najechaniu myszką wymaga wchodzić i wychodzić z kształtu zaktualizować wartość tekstową, natomiast będzie mousemove zmienić wartość, nawet jeśli mysz porusza się wzdłuż linii.)

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

Było trochę błędów w swojej odpowiedzi.

d3.svg.mouse(this) 

nie działa.

Prawidłowa odpowiedź to

d3.mouse(this)