D3 Liniengenerator Bedienung mehrere Arrays

Question

Ich habe 3-Arrays innerhalb einer JSON-Datei mit der folgenden Struktur:

Ich versuche, eine JSON-Datei zu analysieren etwas von Koordinatendaten in der von D3 gelesen werden kann Pfad-/Liniengeneratoren. Ich musste zuerst einen Weg finden, um sicherzustellen, dass die Werte tatsächliche Zahlen und keine Strings sind. Eine vollständige Diskussion findet sie hier: D3/JS mapping a JSON data callback

Diese Diskussion mich dazu veranlasste nur über .map() zu der Formatierung von Zahlen, die JSON-Daten nicht zu berücksichtigen, sondern auch ein verschachteltes/ZIP-Format betrachten, dass der Liniengenerator Sinn machen kann. Das ist wirklich das Ziel, nach dem ich die ganze Zeit gesucht habe. Wie oben gezeigt, hat My JSON 3 Arrays, xs, ys und id. id regelt nur die Farbe und nimmt 1 von 3 Werten (0,1,2). Ich war diesen Ansatz empfohlen:

var obj = raw_json[0]; 
var data = obj.id.map((id, i) => [+id, +obj.xs[i], +obj.ys[i]]); 

Meine Linie Generatorfunktion ist:

var valueLine = d3.svg.line() 
    .x(function(d) {return xScale(d.xs);}) 
    .y(function(d) {return yScale(d.ys)}); 

aber ich Zehntausende von Störungen zu erhalten, und leider habe ich nicht so viel Erfahrung mit Parsing Fragen und Ich bin mir nicht sicher, wie es weitergeht.

Voller Block & JSON here.

Answer 1

Ich bin froh zu sehen, dass Sie meinen Rat zur Umstrukturierung Ihrer Daten ergriffen haben, während wir uns in die richtige Richtung bewegen. Ich schlug vor, dass Sie Ihre drei separaten Arrays in ein Array einzelner Arrays pro Punkt umwandeln sollten, um die Verwendung des Liniengenerators einfacher zu machen und die Notwendigkeit für Array-übergreifende Lesevorgänge zum Sammeln von Daten für die Punkte zu eliminieren.

Dieses Mal greifen Sie jedoch nicht korrekt auf Ihre Werte zu. Bei Verwendung von function(d) { return xScale(d.xs); } gehen Sie davon aus, dass Ihre Punkte durch Objekte mit den Eigenschaften xs und ys dargestellt wurden. Mein vorgeschlagener Ansatz löste diese Eigenschaften jedoch, indem die Informationen in Arrays gespeichert wurden. Es gibt grundsätzlich zwei Möglichkeiten, um dieses:

1. Passen Sie Pfad des Generators .x() und .y() Rückrufe, während die Datenstruktur zu halten.

   var obj = raw_json[0]; 
   var data = obj.id.map((id, i) => [+id, +obj.xs[i], +obj.ys[i]]); 
   
   // Remember, that d is a point's array [id, x, y] 
   var valueLine = d3.svg.line() 
       .x(function(d) { return xScale(d[1]); }) 
       .y(function(d) { return yScale(d[2]); }); 
   

2. Wenn Sie Ihre Punkte Daten in Objekten zu speichern, anstatt, wäre eine andere Lösung einzustellen sein, wie Ihre Daten aufgebaut ist.

   // Structure data into an array of objects {id, x, y} 
   var obj = raw_json[0]; 
   var data = obj.id.map((id, i) => ({ 
       id: +id, 
       x: +obj.xs[i], 
       y: +obj.ys[i] 
   })); 
   
   // Keep your code as d now has properties x and y. 
   var valueLine = d3.svg.line() 
       .x(function(d) { return xScale(d.x); }) 
       .y(function(d) { return yScale(d.y); }); 
   

Answer 2

Ich denke, dass Sie die Daten nicht korrekt modellieren, die mit data(data).enter() und/oder d3.svg.line() zu verwenden sind. Wie Sie Ihre valueLine Funktion definiert haben, erwartet sie ein Array von Objekten mit xs und ys Eigenschaften und Sie füttern es mit einem Array von Arrays.

Probieren Sie es manuell zu sehen, wie es valueLine([{xs: 1, ys: 1}, {xs: 3, ys: 5}, {xs: 12, ys: 21}]) und sehen Sie die erzeugte svg Weg funktioniert: "M100,400L300,-400L1200,-3600"

Vielleicht können Sie ändern, wie Sie Ihre Daten für etwas vorbereiten, wie:
var data = obj.id.map((id,i) => ({id: +id, xs:+obj.xs[i], ys: +obj.ys[i]}));