Ausgabe mit Tooltip d3 Liniendiagramm

Question

Also ich versuche, eine Werkzeugspitze für meine Liniendiagramm mit Mark Antwort/Beispiel implementieren von hier Multiseries line chart with mouseover tooltip

Ich bin in der Lage die Tooltip-Linie zu bekommen scheinen, als ich schweben über meine Datenpunkte aber ich bin durch einen Fehler blockiert in ich nehme meine x.invert-Funktion an.

Uncaught ReferenceError: x is not defined 

Ich habe zu sehen, wird geprüft, ob diese d3v4 unterstützt wird und erforscht andere Beispiele, aber kein Glück.

in meinem Hier ist mein voller Code in JSfiddle, danke im Voraus.

https://jsfiddle.net/zos5jfzp/

Answer 1

Es gibt einige Fehler in Ihrem Code:

Uncaught ReferenceError: x is not defined von Ihnen Ihre Waage xScale und nicht x

Sie haben das gleiche Problem für Ihre y Skala, benennen Sie sie um yScale Name kommt

Sie versuchen, alle Zeilen mit einem Abfrage-Selektor auf line zu erhalten Sie haben den Zeilen jedoch keine Klasse zugewiesen.

vis.append('svg:path') 
    .attr('class', 'graph-line') 
    .attr('d', lineGen(d.values)) 
    .style("stroke", function() { 
     return d.color = color(d.key); 
    }) 
    .attr('stroke-width', 2) 
    .attr("id", 'tag' + d.key.replace(/[^\w]|_/g, '')) 
    .attr('fill', 'none'); 

Und

var lines = document.getElementsByClassName('graph-line'); 

Schließlich haben Sie

idx = bisect(d.Count, xDate); 

zu

idx = bisect(d.values, xDate); 

Hier ist die aktualisierte Geige ändern: https://jsfiddle.net/zos5jfzp/1/