dc.js를 사용하여 누적 막 대형 차트를 만드는 방법은 무엇입니까?

Question

DC.JS를 사용하여 누적 막 대형 차트를 만들고 싶습니다.

나는 아무 소용 dc.js를 (graph, source code)에서 문서를 활용하는 시도했습니다 - 아래는 내 시도 (here is my attempt in jsfiddle)와 CodePen 내 가장 최근의 시도이다.

'이름'을 X 축, '유형'을 스택으로 사용하고 싶습니다.

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.17/d3.js"></script> 
<script src="https://rawgithub.com/NickQiZhu/dc.js/master/web/js/crossfilter.js"></script> 
<script src="https://cdnjs.site44.com/dc2.js"></script> 
<div id="chart"></div> 

자바 스크립트

var data = [ {"Name":"Abby","Type":"Apple"}, {"Name":"Abby","Type":"Banana"}, {"Name":"Bob","Type":"Apple"} ] 

data.forEach(function(x) { 
    x.Speed = +x.Type; 
}); 

var ndx = crossfilter(data) 

var xdim = ndx.dimension(function (d) {return d.Name;}); 

function root_function(dim,stack_name) { 
    return dim.group().reduce(
    function(p, v) { 
    p[v[stack_name]] = (p[v[stack_name]] || 0) + v.Speed; 
    return p;}, 
    function(p, v) { 
    p[v[stack_name]] = (p[v[stack_name]] || 0) - v.Speed; 
    return p;}, 
    function() { 
    return {}; 
    });} 

var ydim = root_function(xdim,'Type') 

function sel_stack(i) { 
return function(d) { 
    return d.value[i]; 
};} 

var chart = dc.barChart("#chart"); 

chart 
    .x(d3.scale.ordinal().domain(xdim)) 
    .dimension(xdim) 
    .group(ydim, "1", sel_stack('1')) 
    .xUnits(dc.units.ordinal); 

for(var i = 2; i<6; ++i) 
    chart.stack(ydim, ''+i, sel_stack(i)); 

chart.render(); 

나는 약간의 시간이 바이올린을 켜는 봤는데 내가 몇 가지 추가 연구 결과가 있습니다

• 내가 데이터 배열을 대체 다음과 같이 작동합니다.

  data = [{ "이름": "Abby", "유형": "1"}, { "이름": "Abby", "유형": "2"}, { "이름" "유형": "1"}]

• 하지만 (https://github.com/dc-js/dc.js/blob/develop/web/js/dc.js)

• 그러나 직류 2.1.0-DEV와 (https://cdnjs.cloudflare.com/ajax/libs/dc/1.7.5/dc.min.js) 직류 1.7.5 스왑 때 데이터를 교체 할 때 만 작동 배열은 다음과 같이 작동하지 않습니다 :

  데이터 = [{ "이름": "Abby", "유형": "3"}, { "이름": "Abby", "유형": "4 "}, {"Name ":"Bob ","Type ":"2 "}]

루트 문제가 root_function에 있다고 생각합니다.

Answer 1

v. 속도는 현재 예제에서 항상 NaN입니다. +x.Type은 "Apple"과 같은 문자열을 숫자로 변환하려고 시도하기 때문에 실패합니다. 카운트하고 싶다면 v.Speed이 아닌 감속기에 1을 더하거나 뺍니다. 물론이 변경 사항을 처리하기 위해 sel_stack 코드와 차트 코드를 업데이트해야합니다.

다음은 데이터에서 2 가지 유형의 작동 예제입니다. 다만, http://codepen.io/anon/pen/GjjyOv?editors=1010

var data = [ {"Name":"Abby","Type":"Apple"}, {"Name":"Abby","Type":"Banana"}, {"Name":"Bob","Type":"Apple"} ] 

var ndx = crossfilter(data) 

var xdim = ndx.dimension(function (d) {return d.Name;}); 

를 감속기에서 : 당신은 아마 차트에 스택을 추가 할 통해 반복 한 후 정면 모든 유형의 배열을 구축하여 유형의 임의의 숫자를 처리 할을 업데이트해야합니다 카운트 하나를 추가 및 빼기 :

var ydim = xdim.group().reduce(
    function(p, v) { 
    p[v.Type] = (p[v.Type] || 0) + 1; 
    return p;}, 
    function(p, v) { 
    p[v.Type] = (p[v.Type] || 0) - 1; 
    return p;}, 
    function() { 
    return {}; 
    }); 

sel_stack가 더 이상들을 필요하지만 키 : 여기

function sel_stack(valueKey) { 
return function(d) { 
    return d.value[valueKey]; 
};} 

var chart = dc.barChart("#chart"); 

우리 하드 코딩 예를 목적으로 스택 키, 충분 :

chart 
    .x(d3.scale.ordinal().domain(xdim)) 
    .dimension(xdim) 
    .group(ydim, "Apple", sel_stack('Apple')) 
    .xUnits(dc.units.ordinal); 

또 다른 하드 코딩 된 스택 키. 모든 스택 값을 보유하는 일종의 데이터 구조를 만든 후에 루프를 다시 작성해야합니다.

//for(var i = 2; i<6; ++i) 
    chart.stack(ydim, 'Banana', sel_stack('Banana')); 

chart.render();