Neuzeichnen Histogramme mit Crossfilter und D3

Ich bin eine Anpassung der Crossfilter Bibliothek zu visualisieren einige tweets habe ich das sammeln von der Olympiade. Ich bin versucht, zu einer wesentlichen Verlängerung der ursprünglichen Beispiel auf zwei Arten:

1. Anstatt die Listen der Flüge auf der Grundlage der ursprünglichen dataset, ich möchte zur Anzeige von Listen von Elementen in einem Datensatz eingegeben von Elementen, die derzeit ausgewählt crossfilter.
2. Wechseln zwischen verschiedenen Datenquellen und laden Sie die Histogramme und Tabellen.

Habe ich einen Teil (1) arbeiten als geplant. Allerdings ist ein Teil (2) gibt mir einige Probleme. Ich bin derzeit ändern Sie den Datensatz, indem Sie entweder eine neue "sport" - anzeigen oder wählen Sie eine neue Zusammenfassung Algorithmus. Beim Umschalten entweder von diesen, ich glaube, ich sollte zuerst entfernen Sie den Filter, Diagramme und Listen, die zuvor erstellt und angezeigt, und laden Sie dann die neuen Daten.

Jedoch, etwas neues zu front-end-Visualisierungen, vor allem D3 und Crossfilter, ich habe nicht herausgefunden, wie dies zu tun, noch bin ich sicher, wie sogar die besten Satz der Frage.

Habe ich ein Beispiel für mein problem hier. Die Auswahl eines Bereichs auf Datum, dann Wechsel von Bogenschießen zu Fechten, dann die Auswahl reset zeigt ein gutes Beispiel dafür, was falsch ist: nicht alle neuen Daten gezeichnet werden.

Wie gesagt, die meisten der code, der gezogen wird, bilden die Crossfilter Beispiel und Tutorial on making radial-Visualisierungen. Hier einige der key-code-chunks, die ich denke sind relevant:

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"));
}); 

Neuladen der Daten:

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 der cross-filter über die 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();

Meine Vermutung ist, dass ich beginnen sollte plotSportData mit etwas, das löscht den alten Datensatz, aber ich bin mir nicht sicher, was dieses etwas Aussehen sollte. Irgendwelche Vorschläge oder Ideen wären höchst willkommen.