Crossfilter 및 D3으로 막대 그래프 다시 그리기

Question

Crossfilter 라이브러리를 적용하여 Olympics에서 수집 한 일부 트윗을 시각화했습니다. 나는 기본적으로 두 가지 방법으로 초기 예제를 확장하려고 해요 :

1. 대신 원본 데이터 셋을 기반으로 항공편의 목록을 표시하는, 나는 현재 crossfilter에 의해 선택된 항목에 의해 키가 다른 데이터 세트에있는 항목의 목록을 표시합니다.
2. 다른 데이터 소스간에 전환하고 히스토그램과 테이블을 다시로드하십시오.

계획대로 작업하고 있습니다 (1). 그러나 파트 (2)는 나에게 약간의 문제를주고있다. 저는 현재 새로운 "스포츠"를 선택하거나 새로운 요약 알고리즘을 선택하여 데이터 세트를 변경하고 있습니다. 이 중 하나를 전환 할 때 이전에 생성 및 표시 한 필터, 차트 및 목록을 먼저 제거한 다음 새 데이터를 다시로드해야한다고 생각합니다.

그러나 프런트 엔드 시각화, 특히 D3 및 Crossfilter에 다소 익숙하지 않은 나는이 작업을 수행하는 방법을 찾지 못했고 질문을 가장 잘 표현하는 방법도 분명하지 않습니다.

나는 문제가되는 작업 예제가 here입니다. Date에서 Range를 선택하고 Archery에서 Fencing으로 전환 한 다음 Reset을 선택하면 잘못된 데이터가 표시됩니다. 모든 새 데이터가 플로팅되지는 않습니다.

로서 코드의 대부분은 형태에게 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

잠을 자고 나면 그 해결책이 나에게 찾아왔다.

은 그냥 .chart div의 아래에 중첩 어떤 히스토그램을 잡아 그들을 제거 plotSportData의 시작 부분에

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

를 호출해야합니다. 제거 할 요소가 없으면 아무 작업도 수행하지 않습니다.