Histogramları Crossfilter ve D3 ile yeniden çizme

Question

Crossfilter kitaplığını, Olympics'dan topladığım bazı tweet'leri görselleştirmek için uyarıyorum. Ben aslında iki şekilde ilk örneği uzatmak çalışılıyor:

1. yerine orijinal veri kümesi dayalı uçuş listelerini görüntüleme, Şu anda crossfilter tarafından seçilen öğelerin anahtarlı başka veri kümesindeki öğelerin bir listesini görüntülemek istiyor.
2. Farklı veri kaynakları arasında geçiş yapın ve histogramları ve tabloları yeniden yükleyin. planlandığı gibi

bende bölüm (1) çalışma. Ancak, kısım (2) bana biraz sıkıntı veriyor. Şu anda veri kümesini yeni bir özet algoritması görüntülemek veya seçmek için yeni bir "spor" seçerek değiştiriyorum. Bunlardan herhangi birini değiştirirken, önce oluşturulmuş ve görüntülenen filtreleri, grafikleri ve listeleri kaldırmam gerektiğine ve ardından yeni verileri yeniden yüklemem gerektiğine inanıyorum. Bununla birlikte, özellikle D3 ve Crossfilter gibi ön uç görselleştirmelerinden biraz daha yeni olmanın yanı sıra, bunun nasıl yapılacağına da karar vermedim, hatta bu sorunun nasıl en iyi şekilde ifade edileceğine de emin değilim.

Problemimin here bir çalışma örnek var. Tarihte bir aralık seçmek ve ardından Okçuluktan Eskrim'e geçiş yapmak ve ardından sıfırlamayı seçmek, neyin yanlış olduğuna dair iyi bir örnek gösterir: tüm yeni veriler çizilmez.

zamanda kod çoğu formu Crossfilter örneği ve Tutorial on making radial visualizations çekilir, sözü geçen. verileri yeniden yükleniyor

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

:

yeni bir veri kaynağı seçme:

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

Ve verileri kullanılarak çapraz filtreyi yükleme İşte bence alakalı anahtar kodu parçalar bazıları aşağıda verilmiştir:

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(); 

Tahminimce, plotSportData numaralı eski veri kümesini temizler, ancak bir şeyin neye benzemesi gerektiğinden emin değilim. Herhangi bir öneri veya düşünce kesinlikle takdir edilecektir.

Answer 1

Bir gece uykusundan sonra, çözüm bana geldi.

Sadece .chart div altında iç içe herhangi histogramlar kapmak ve onları kaldırır plotSportData başında

d3.selectAll(".chart").selectAll("svg").remove(); 

çağırmanız gerekir. Ve kaldırılacak hiçbir öğe yoksa, bu bir op-op olacaktır.