Die Auswahl von d3 data subset basiert auf der Spalte

Wie passe ich den code unten aus http://bl.ocks.org/mbostock/3884955, wählen bestimmte Spalten?

var line = d3.svg.line()
.x(function(d) { return x(d.date); })
.y(function(d) { return y(d.temperature); });

d3.tsv("data.tsv", function(error, data) {
  color.domain(d3.keys(data[0]).filter(function(key) { return key !== "date"; }));

  data.forEach(function(d) {
    d.date = parseDate(d.date);
  });

  var cities = color.domain().map(function(name) {
    return {
      name: name,
      values: data.map(function(d) {
        return {date: d.date, temperature: +d[name]};
      })
    };  

  });

In die verwendeten Daten, die in dem oben genannten Beispiel gibt es 4 Spalten: Datumsangaben und 3 Spalten für die Temperatur in 3 Städte. In meinem Anwendungsfall habe ich 10 Spalten: Datumsangaben und 3 Variablen pro Stadt für 3 Städte also (1 + [3 * 3]). Ich würde gerne das laden der gesamten Daten-set (für den Einsatz in tooltips), aber nur im Diagramm darstellen möchten, eine der Variablen, die pro city, die in der Spalte index # 1, 4 und 7. Wie mache ich das? (siehe rau-syntax weiter unten).

var cities = color.domain().map(function(name) {
  return {
    name: name,
    values: data.map(function(d) {
      return {date: d.date, maxTemperature: *+d[arrays in column index 1, 4 and 7]*};
    })
    values2: data.map(function(d) {
      return {date: d.date, minTemperature: *+d[arrays in column index 2, 5 and 8]*};
    })
    values3: data.map(function(d) {
      return {date: d.date, avgTemperature: *+d[arrays in column index 3, 8 and 9]*};
    })
  };
});
InformationsquelleAutor WittyID | 2013-10-01
  1. 1

    Sollten Sie nicht brauchen, um änderungen an dem bestehenden code. Der Weg cities eingerichtet ist, müssen Sie nur geben Sie einen aussagekräftigen Namen, um die Daten, die Sie brauchen, und verweisen Sie auf später. So hätten Sie etwas, das wie

    var cities = color.domain().map(function(name) {
return {
  name: name,
  values: data.map(function(d) {
    return {date: d.date, first: +d[name + " first"], second: +d[name + " second"]};
  })
};

d3.min(cities, function(c) { return d3.min(c.values, function(v) { return v.first; }); });

    Beachten Sie, dass die tatsächlichen Namen natürlich davon abhängen, was in Ihren Daten.

    • Ich würde anfangen, indem wir uns entschuldigen für meine mangelnde Tiefe mit javascript, aber ich bin mir nicht klar, wie der obige code löst das problem. Sind die Verwendung der "erste:" und zweitens:" Benutzer-definierte Namen-oder d3-keywords? Wie funktioniert der obige code wählen bestimmte Spalten basierend auf deren index # ohne mich zu wissen, Ihre Namen? Auch, da bin ich versucht zu rufen mehrere Spalten auf einmal, wie Ersetze ich v. zunächst (beispielsweise) mit etwas, das nennt ersten, zweiten, vierten usw. Diese selektive multi-column Daten nennen würde, was ich auch verwenden, definieren Sie die y-Achse von Diagramm-Linien (siehe edit in Frage).
    • Die Namen sind user-definiert. Sie müssen wissen, den Namen der Spalte, wenn Sie diese Technik, sonst können Sie d3.tsv.parseRows(). Wenn Sie möchten, um mehrere Werte zu bestimmen, die Grenzen, einfach legen Sie Sie in ein array und verwenden Sie d3.min (oder max).
    InformationsquelleAutor Lars Kotthoff
  2. 1

    Konnte ich lösen es, indem Sie filter wichtige Voraussetzungen, um ausschließlich die anderen Kategorien von Daten, die ich nicht in einem Diagramm darstellen möchten. In dem Beispiel, das ich oben verwendet habe, hatte ich eine min -, max-und avg-temp-pro Stadt und wollte schnappen Sie nur die avg-Temperaturen. Ich fügte Filter ohne Spaltenüberschriften mit Zeichenfolgen enthalten, dass "max" oder "min" wie so. 

    color.domain(d3.keys(data[0]).filter(function(key) 
    { return key !== "date" && key.indexOf("max") == -1 && 
    key.indexOf("min") == -1; });

    Ich nicht unbedingt wissen, was die gesamte Spalte name ist, aber in meinem Anwendungsfall, die verschiedenen Variablen werden immer getaggt mit max, min oder avg macht dies eine brauchbare Lösung für mich, aber wahrscheinlich nicht für jemanden mit völlig unbekannten Spaltenüberschriften. Ich hatte anfangs wollte Sie Spalten auswählen, die basierend auf der index -#, aber das funktioniert gut.

    InformationsquelleAutor WittyID
  3. 1

    Dieser arbeitete für mich in Bezug auf die Auswahl der Spalten:

    d3.csv("data.csv", function(error, data) {
  color.domain(d3.keys(data[0]).filter(function(key) {
    return key == "avg" || key == "additional_columns"; 
  });
});
    InformationsquelleAutor user3882631
Schreibe einen Kommentar