D3: skip Nullwerte in Liniendiagramm mit mehreren Linien

Ich habe ein dynamisches array zu zeigen, ein Liniendiagramm mit mehreren Linien. Beispiel:

var data = 
[[{x:2005, y:100}, {x:2007, y:96.5}, {x:2009, y:100.3}, {x:2011, y:102.3}], 
 [{x:2005, y:100}, {x:2007, y:105},  {x:2009, y:102},   {x:2011, y:104}]]

Diesem Teil meiner script zeichnet die Linien:

graph.selectAll("path.line")
.data(data)
.enter().append("path")
.attr("class", "line")
.style("stroke", function(d, i) { return d3.rgb(z(i)); })
.style("stroke-width", 2)
.attr("d", d3.svg.line()
.y(function(d) { return y(d.y); })
.x(function(d,i) { return x(i); }));

(Das Skript, das ich verwende, ist basierend auf http://cgit.drupalcode.org/d3/tree/libraries/d3.linegraph/linegraph.js)

Mein problem: das Daten-array ist dynamisch, ich weiß nicht vorher, was drin ist. Manchmal ist der y-Wert für das Jahr 2005 null sein:

var data = 
[[{x:2005, y:100},  {x:2007, y:96.5}, {x:2009, y:100.3}, {x:2011, y:102.3}], 
 [{x:2005, y:null}, {x:2007, y:105},  {x:2009, y:102},   {x:2011, y:104}]]

Wie kann ich die zweite Zeile ignorieren, das erste Objekt und beginnen bei 2007?

Basierend auf Antwort 1 das ist, was ich jetzt habe, noch mit der ganzen Linie:

data = 
[[{x:2005, y:100},  {x:2007, y:96.5}, {x:2009, y:100.3}, {x:2011, y:102.3}], 
 [{x:2005, y:null}, {x:2007, y:105},  {x:2009, y:102},   {x:2011, y:104}]];

var validatedInput = function(inptArray) { 
 return inptArray.filter(function(obj) {
  return obj.y != null;
 });
};

graph.selectAll("path.line")
    .data(data, validatedInput)
  .enter().append("path")
    .attr("class", "line")
    .style("stroke", function(d, i) { return d3.rgb(z(i)); })
    .style("stroke-width", 2)
    .attr("d", d3.svg.line()
    .y(function(d) { return y(d.y); })
    .x(function(d,i) { return x(i); }));
InformationsquelleAutor eindgebruiker | 2014-07-20
  1. 3

    Am Ende löste ich dieses selber, auf die Lösung hier. Der trick ist, entfernen Sie das leere Werte so spät wie möglich, so dass die Positionen aller Werte (Punkte) auf der Leinwand erhalten bleiben.

    graph.selectAll("path.line")
    .data(data)
  .enter().append("path")
    .attr("class", "line")
    .style("stroke", function(d, i) { return d3.rgb(z(i)); })
    .style("stroke-width", 2)
    .attr("d", d3.svg.line()
    .y(function(d) { return y(d.y); })
    .defined(function(d) { return d.y; }) //Omit empty values.
    .x(function(d,i) { return x(i); }));

    Dieser Arbeit wird für leere Werte am Anfang und Ende einer Zeile.

    • Hey @eingebruiker, könnten Sie bitte erklären, wie die Linie der defined() Werke und lassen Sie weglassen leeren Werte?
    • Ugh, das war vor mehr als einem Jahr, und ich habe nicht sah es da 🙂 ich glaube es funktioniert wie folgt: Es wirkt wie ein filter. Blick auf die letzten drei Zeilen. Zuerst wird die y-position der Punkte auf der Leinwand bestimmt. Dann mit defined(), die Punkte, wo y == null entfernt sind. Dann die x-position der übrigen Punkte bestimmt wird.
    InformationsquelleAutor eindgebruiker
  2. 2

    Dies sollte es tun:

    .data(data, function(inptArray) { 
  return inptArray.filter(function(obj) {
   return obj.y != null;
  }) 
});

    wäre es besser zu schreiben es so:

    var validatedInput = function(inptArray) { 
 return inptArray.filter(function(obj) {
  return obj.y != null;
});

.data(data, validatedInput);

    Oder können Sie einfach formatieren Sie Ihre Daten-Objekt, bevor es zu D3:

    var data = data.map(function(obj){
 return obj.filter(function(obj) {
  return obj.y != null;
 })
})
    • Hi sergeyz, ich habe versucht, Ihren Vorschlag, aber jetzt ist die zweite Zeile wird nicht generiert, an alle.
    • Sie haben zwei arrays von Objekten oder es soll ein array von Objekten? Auch { x=2005, y=100} bedeutet, dass { x: 2005, y: 100}, richtig?
    • In Ihrem Beispiel, haben Sie ein array zugewiesen ist Daten-variable und ein array, das nicht zugewiesen ist, zu nichts. Ein array: var Daten = [{ x=2005, y=100}, { x=2007, y=96.5}, { x=2009, J=100.3}, { x=2011, y=102.3}] ein Weiterer arrya: [{ x=2005, y=null}, { x=2007, y=105}, { x=2009, J=102}, { x=2011, y=104}] Wenn Sie in DevTool überprüfen, was in den Daten nach rechts, bevor Sie Sie weitergeben .Daten.
    • Oh sorry, habe ich kopiert aus einer Konsole.log im Firebug, ein bisschen zu hastig. Daten ist in der Tat ein array von arrays von Objekten. Ich veränderte meine Frage mit den richtigen Daten-array.
    • Ich habe versucht, Ihr validateInput (mit einem extra } fehlte am Ende). Jetzt habe ich zwei komplette Linien, einschließlich der null-Wert. So ist es nicht die funktioniert noch.
    • Seltsam, es funktionierte auf meinem Rechner. Eine andere Methode versuchen. Nur fügte hinzu, es auf meine Antwort.
    • Ja, ich habe versucht, die Letzte Methode zu. Es wird in der Tat überspringen Sie das erste Objekt, sondern die ganze Zeile wird nach Links verschoben, so startet es bei 2005 und Ende 2009.

    InformationsquelleAutor sergeyz
Schreibe einen Kommentar