क्रॉसफिल्टर और डी 3

Question

के साथ हिस्टोग्राम को फिर से निकालना मैं Olympics से एकत्रित कुछ ट्वीट्स को देखने के लिए Crossfilter लाइब्रेरी का अनुकूलन कर रहा हूं। मैं अनिवार्य रूप से दो तरह से प्रारंभिक उदाहरण का विस्तार करने का प्रयास कर रहा हूँ:

1. इसके बजाय मूल डाटासेट के आधार पर उड़ानों की सूचियों को प्रदर्शित करने में, मैं वर्तमान crossfilter द्वारा चयनित आइटम से keyed एक और डेटासेट में आइटम सूचियां प्रदर्शित करना चाहते हैं।
2. विभिन्न डेटा स्रोतों के बीच स्विच करें और हिस्टोग्राम और तालिकाओं को पुनः लोड करें।

मुझे भाग (1) योजनाबद्ध के रूप में काम मिला है। हालांकि, भाग (2) मुझे कुछ परेशानी दे रहा है। मैं वर्तमान में एक नया सारांश "एल्गोरिदम प्रदर्शित करने या चुनने के लिए एक नया" खेल "चुनकर डेटासेट बदल रहा हूं। इनमें से किसी एक को स्विच करते समय, मेरा मानना ​​है कि मुझे सबसे पहले बनाए गए और प्रदर्शित फ़िल्टर, चार्ट और सूचियों को हटा देना चाहिए और फिर नया डेटा पुनः लोड करना चाहिए।

हालांकि, कुछ अंत में विज़ुअलाइजेशन, विशेष रूप से डी 3 और क्रॉसफिल्टर के लिए कुछ नया होने के नाते, मुझे यह नहीं पता है कि यह कैसे करना है, और न ही मुझे यह सुनिश्चित है कि प्रश्न को सबसे अच्छा वाक्यांश कैसे दिया जाए।

मेरे पास मेरी समस्या का एक उदाहरण उदाहरण here है। तिथि पर एक सीमा का चयन करके तीरंदाजी से बाड़ लगाने के लिए स्विच करना, फिर रीसेट का चयन करना गलत क्या है इसका एक अच्छा उदाहरण दिखाता है: सभी नए डेटा प्लॉट नहीं किए जाते हैं।

के रूप में कहा, कोड के सबसे प्रपत्र Crossfilter उदाहरण और एक Tutorial on making radial visualizations खींचा जाता है।

एक नया डेटा स्रोत का चयन:

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

डेटा को पुन: लोड:

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

और डेटा का उपयोग कर पार फिल्टर लोड हो रहा है यहाँ कुंजी कोड हिस्सा मुझे लगता है कि प्रासंगिक हैं कि के कुछ है:

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

मेरा अनुमान है कि मुझे plotSportData से कुछ ऐसा शुरू करना चाहिए पुराने डेटासेट को साफ़ करता है, लेकिन मुझे यकीन नहीं है कि कुछ ऐसा दिखना चाहिए। किसी भी सुझाव या विचारों की अत्यधिक सराहना की जाएगी।

Answer 1

रात की नींद के बाद, समाधान मेरे पास आया।

मैं सिर्फ plotSportData की शुरुआत जो .chart divs अंतर्गत नेस्टेड किसी भी हिस्टोग्राम आकर्षित करने और उन्हें निकाल देंगे पर

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

कॉल करने के लिए की जरूरत है। और यदि निकालने के लिए कोई तत्व नहीं है, तो यह नो-ऑप होगा।