Ich passe das anCrossfilter Bibliothek, zum einiger Tweets zu sichtbar zu machen, die ich vom gesammelt habeOlympia. Ich versuche, das ursprüngliche Beispiel im Wesentlichen auf zwei Arten zu erweitern:

Anstatt Listen von Flügen basierend auf dem ursprünglichen Datensatz anzuzeigen, möchte ich Listen von Elementen in einem anderen Datensatz anzeigen, die durch Elemente gekennzeichnet sind, die derzeit durch Crossfilter ausgewählt sind.Wechseln Sie zwischen verschiedenen Datenquellen und laden Sie die Histogramme und Tabellen neu.

Ich habe Teil (1) wie geplant arbeiten. Teil (2) bereitet mir jedoch einige Probleme. Ich ändere derzeit den Datensatz, indem ich entweder eine neue "Sportart" zur Anzeige auswähle oder einen neuen Zusammenfassungsalgorithmus auswähle. Wenn ich eine dieser Optionen ändere, sollte ich meiner Meinung nach zuerst die zuvor erstellten und angezeigten Filter, Diagramme und Listen entfernen und dann die neuen Daten erneut laden.

Da die Front-End-Visualisierungen, insbesondere D3 und Crossfilter, etwas neu sind, habe ich weder herausgefunden, wie das geht, noch weiß ich, wie ich die Frage am besten formulieren kann.

Ich habe ein funktionierendes Beispiel für mein ProblemHier. Wenn Sie einen Datumsbereich auswählen, dann von Bogenschießen zu Fechten wechseln und dann Zurücksetzen auswählen, sehen Sie ein gutes Beispiel dafür, was nicht stimmt: Es werden nicht alle neuen Daten geplottet.

Wie gesagt, der größte Teil des Codes wird von derCrossfilter Beispiel und aTutorial zur Erstellung von radialen Visualisierungen. Hier sind einige der wichtigsten Codeabschnitte, die meiner Meinung nach relevant sind:

Auswahl einer neuen Datenquelle:

d3.selectAll("#sports a").on("click", function (d) {
    var newSport = d3.select(this).attr("id");
    activate("sports", newSport);
    reloadData(activeLabel("sports"), activeLabel("methods"));
});                          

d3.selectAll("#methods a").on("click", function (d) {
    var newMethod = d3.select(this).attr("id");
    activate("methods", newMethod);
    reloadData(activeLabel("sports"), activeLabel("methods"));
}); 

Daten neu laden:

function reloadData(sportName, methodName) {
    var filebase = "/tweetolympics/data/tweet." + sportName + "." + methodName + ".all.";
    var summaryList, tweetList, remaining = 2;
    d3.csv(filebase + "summary.csv", function(summaries) {
        summaries.forEach(function(d, i) {
           d.index = i;
           d.group = parseInt(d.Group);
           d.startTime = parseTime(d.Start);
           d.meanTime = parseTime(d.Mean);
        });
        summaryList = summaries;
        if (!--remaining)
            plotSportData(summaryList, tweetList);
    });

    d3.csv(filebase + "groups.csv", function(tweets) {
        tweets.forEach(function(d, i) {
            d.index = i;
            d.group = parseInt(d.Group);
            d.date = parseTime(d.Time);
        });
        tweetList = tweets;
        if (!--remaining)
            plotSportData(summaryList, tweetList);
    });
}   

Und laden Sie den Kreuzfilter mit den Daten:

function plotSportData(summaries, tweets) {

    // Create the crossfilter for the relevant dimensions and groups.
    var tweet = crossfilter(tweets),
        all = tweet.groupAll(),
        date = tweet.dimension(function(d) { return d3.time.day(d.date); }),
        dates = date.group(),
        hour = tweet.dimension(function(d) { return d.date.getHours() + d.date.getMinutes() / 60; }),
        hours = hour.group(Math.floor),
        cluster = tweet.dimension(function(d) { return d.group; }),
        clusters = cluster.group();

     var charts = [
        // The first chart tracks the hours of each tweet.  It has the
        // standard 24 hour time range and uses a 24 hour clock.
        barChart().dimension(hour)
                  .group(hours)
                  .x(d3.scale.linear()
                             .domain([0, 24])
                             .rangeRound([0, 10 * 24])),
        // more charts added here similarly...
      ];

    // Given our array of charts, which we assume are in the same order as the
    // .chart elements in the DOM, bind the charts to the DOM and render them.
    // We also listen to the chart's brush events to update the display.
    var chart = d3.selectAll(".chart")
                  .data(charts)
                  .each(function(chart) { chart.on("brush", renderAll)
                                               .on("brushend", renderAll); });

    // Render the initial lists.
    var list = d3.selectAll(".list")
                 .data([summaryList]);

    // Print the total number of tweets.
    d3.selectAll("#total").text(formatNumber(all.value()));

    // Render everything..
    renderAll();

Ich schätze, ich sollte anfangenplotSportData mit etwas, das den alten Datensatz löscht, aber ich bin nicht sicher, wie das etwas aussehen soll. Anregungen oder Gedanken werden sehr geschätzt.