2014-10-21 3 views
1

crossfilter을 사용하여 차원 및 그룹에서 동시에 데이터를 필터링하려고합니다. 말하자면, "byCylinders"차원에서 filterExact 수 있고 동시에 내 groupByBrand 그룹의 값을 필터링 할 수 있기를 원합니다. 이는 브랜드 이름으로 자동차를 줄입니다. (두 확인란 모두 선택)크로스 필터 및 D3 : 그룹 및 크기별 필터링

참조 코드 : http://jsbin.com/xajuc/2/watch?js,output

내가 볼 문제는 모두 필터를 한 번에 인식, 또는 내가 제대로 d3.data()을 바인딩하는 방법을 이해하지하지 않는다는 것입니다.

내가 새로운 "임시"차원을 만들 수 있다는 것을 이해하지만, 크기가 비싸다,이 그것을 할 수있는 가장 좋은 방법이 될하지 않을 수 있습니다

..

어떤 아이디어가?

답변

1

문제는 크로스 필터를 사용하는 것이 아니라 d3 디스플레이를 사용하는 것입니다. 브랜드 필터링에 교차 필터를 사용하지 않으므로 결과를 가져 오기 위해 해당 측정 기준을 사용하는 것이 좋습니다. 그러나 동일한 측정 기준에 대해 dimension.filter을 볼 수는 없습니다.

문제는 변경되었지만 제거되지 않은 저장소에 대한 업데이트 단계가 없다는 것입니다. Crossfilter는 0 개의 항목으로 빈을 자동으로 제거하지 않으므로 byCylinders.filter에 대한 응답으로 실제 빈의 수는 변경되지 않고 크기 만 변경됩니다. 따라서 실린더 확인란을 클릭 할 때 입력 또는 종료가 없습니다 - 실제로 다른 필터 만이 저장소를 제거합니다.

var result = d3.select("body") 
     .select("div#result") 
     .selectAll("div") 
     .data(resultData); 
    result.enter() 
     .append("div"); 
    result 
     .text(function(d){ 
      return d.key + " : " + d.value + " cars found";}); 

.enter()의 항목들이 처리되는 즉시 업데이트를 가능하게한다는 사실을 이용합니다 :

그래서 삽입 후 업데이트 단계를 추가하여, 당신은 숫자의 변화를 볼 수 있습니다.

http://jsbin.com/qesafu/2/edit

+0

감사합니다. D3 컬렉션 필터와 크로스 필터를 함께 사용하는 것이 가장 좋지 않을 수도 있습니다. '깨끗한'버전 (예 : 두 필터 모두 교차 필터 사용)은 어떻습니까? –

+0

사실 저는 여러분이 할 수있는 최선의 방법에 대해 최선을 다하고 있다고 생각합니다. 명백한 방법을 수행하기에 쉽고 효율적이기 때문에 crossfilter는 그런 종류의 필터링 (값을 줄인 것)에 신경 쓰지 않는다고 생각합니다. dc.js를 사용하는 경우 [가짜 그룹 패턴] (https://github.com/dc-js/dc.js/wiki/FAQ#filter-the-data-before-its-charted)을 사용할 수 있습니다.)를 사용하여 논리를 래핑하고 차트가 당길 때마다 호출되도록하십시오. – Gordon

0

.json으로 데이터를 가져 와서 다양한 데이터 요소를 압축하고 .data() 전체 데이터 집합을 전달할 수 있습니다. 나는 다음 사항이 귀하의 필터에도 적용될 수 있다고 생각합니다. 나는 당신이 당신의 데이터를 가져 오는 것처럼 설명 할 것입니다. 바라건대 .data() 과 관련된 데이터와 함께 d3에서 활용 될 수있는 방법에 대한 빛이 빛나기를 바랍니다. 그 우편

d3.json("data.json", function(data) { 

    // zip the two (or more) attributes of your data 
    data = d3.zip(data.property1, data.property2).map(function(d) { 
     property1 = +d[0]; 
     property2 = +d[1]; 

     // return object for each property 
     return {prop1: property1, prop2: property2}; 
    }); 

} 

을 그리고 .DATA는() 얻을 수 있습니다 :

.data(data) 

당신을

data.json 예 :

{ 
    "property1":[0, 0, 0, 0], 
    "property2":['name1', 'name2', 'name3', 'name4'] 
} 

는 .json으로 데이터 가져 오기 한 번에 하나의 데이터 속성 만 호출 할 수 있습니다.

// histogram example 
d3.layout.histogram() 
    .bins() 
    .value(function(d) { return d.attr1; }) 
    (data) 

.value은 zip 속성을 하나만 반환하는 것을 알고 있습니까? 그러나 다른 속성은 여전히 ​​연관되어 있습니다. 여러 속성을 가질 수도 있고, 계산을 수행하기 위해 몇 가지를 사용하고, 다른 모든 데이터 속성을 메타 데이터로 사용할 수도 있습니다. 왜냐하면 모두 작은 멋진 묶음으로 묶여 있기 때문입니다.

또 다른 옵션은 .data()에 하나의 배열/데이터를 전달하고 다른 배열에 인덱스를 사용하는 것입니다. 여기에 설명 된

두 옵션 : 여기에 이전의 상세한 예와

d3 array input line graph example

는 :

http://bl.ocks.org/patrickberkeley/9162034

나는이 개념은 당신이 후에 무엇을 생각합니다. 내가 틀렸다면 알려줘.

+0

덕분에,하지만 정확히 - 난 그냥이 jsbin 예를 위해 문자열에서 CSV를 구문 분석, D3의 데이터입니다로드하는 방법을 알고있다. 질문은 실제로 crossfilter (http://square.github.io/crossfilter/) 및 D3와 관련이 있습니다. DC.js (http://dc-js.github.io/dc.js/)가이 작업을 수행하지만 여기서는 사용하지 않으려 고합니다 ... –