DC.js 누적 선 차트가 작동하지 않습니다.

Question

documentation에서 제공되는 것보다 더 완벽한 차트 또는 dc.js가있는 차트가 있습니까? 나는 2 개의 쌓아 올린 수준을 가진 간단한 선 도표를 창조하는 것을 시도하고있다.

내가 WasteDate는 y 축에있을 x 축과 WasteData에가되고 싶어요 : 나는 다음과 같은 CSV를 활용하고있다. 또한 하나의 레이어를 WasteFunction Minimization으로 만들고 다른 레이어를 WasteFunction Disposal으로 만들 것을 원합니다. (매우 대략) 다음과 같이이 나에게 무언가를 제공해야합니다 :

을 지금, 나는 그것을 이해, 내 2 다음 필터링 된 차원을 crossfilter를 사용하여 X 축에 대한 차원을 작성하고 필요 스택.

x 축에 대한 치수는 날짜가 될 것입니다 :

// dimension by month 
var Date_dim = ndx.dimension(function (d) { 
    return d.WasteDate; 
}); 

// Get min/max date for x-axis 
var minDate = Date_dim.bottom(1)[0].WasteDate; 
var maxDate = Date_dim.top(1)[0].WasteDate; 

그럼 난 다음, y 축에 대한 차원을 만들어 내 스택의 각을 필터링해야?

: 나는 RenderAll() 기능에이 오류를 전달받을 수 없습니다, 지금

moveChart 
    .renderArea(true) 
    .width(900) 
    .height(200) 
    .dimension(Date_dim) 
    .group(WasteFunction_Minimisation, 'Minimisation') 
    .stack(WasteFunction_Disposal, 'Disposal') 
    .x(d3.time.scale().domain([minDate, maxDate])); 

:

// WasteType dimension 
var WasteFunction_dim = ndx.dimension(function (d) { 
    return d.WasteFunction; 
}); 

// Minimisation Filter 
var WasteFunction_Disposal = WasteFunction_dim.filter("Disposal"); 

// Disposal Filter 
var WasteFunction_Minimisation = WasteFunction_dim.filter("Minimisation"); 

그럼 설정에 차트를 다음을 사용할 수 있어야합니다

---

전체 코드 :

< script type = "text/javascript" > 
 

 
    $(document).ready(function() { 
 

 
    var moveChart = dc.lineChart('#monthly-move-chart'); 
 

 
    d3.csv('minimisation-vs-disposal.csv', function(data) { 
 
     /* format the csv file a bit */ 
 
     var dateFormat = d3.time.format('%d/%M/%Y'); 
 
     var numberFormat = d3.format('.2f'); 
 

 
     data.forEach(function(d) { 
 
     d.dd = dateFormat.parse(d.WasteDate); 
 
     d.WasteData = +d.WasteData // coerce to number 
 
     }); 
 

 
     // Cross Filter instance 
 
     var ndx = crossfilter(data); 
 
     var all = ndx.groupAll(); 
 

 
     // dimension by month 
 
     var Date_dim = ndx.dimension(function(d) { 
 
     return d.WasteDate; 
 
     }); 
 

 
     // Get min/max date for x-axis 
 
     var minDate = Date_dim.bottom(1)[0].WasteDate; 
 
     var maxDate = Date_dim.top(1)[0].WasteDate; 
 

 
     // Waste Data dimension 
 
     var WasteData_dim = ndx.dimension(function(d) { 
 
     return d.WasteData; 
 
     }); 
 

 
     // WasteType dimension 
 
     var WasteFunction_dim = ndx.dimension(function(d) { 
 
     return d.WasteFunction; 
 
     }); 
 

 
     // Minimisation Filter 
 
     var WasteFunction_Disposal = WasteFunction_dim.filter("Disposal"); 
 

 
     // Disposal Filter 
 
     var WasteFunction_Minimisation = WasteFunction_dim.filter("Minimisation"); 
 

 
     moveChart 
 
     .renderArea(true) 
 
     .width(900) 
 
     .height(200) 
 
     .transitionDuration(1000) 
 
     .dimension(Date_dim) 
 
     .group(WasteFunction_Minimisation, 'Minimisation') 
 
     .stack(WasteFunction_Disposal, 'Disposal') 
 
     .x(d3.time.scale().domain([minDate, maxDate])); 
 

 
     dc.renderAll(); 
 
    }); 
 
    }); 
 

 
< /script>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script> 
 
<div id="monthly-move-chart"> 
 
    <strong>Waste minimisation chart</strong> 
 
</div>

Answer 1

그것은 사실3210, dc.js를 많은 문서가 없습니다. 누군가는 책을 쓸 수는 있지만 일어난 것은 아닙니다. 사람들은 대부분 시작하기 위해 예제를 의지하며, annotated stock example은 좋은 첫 번째 읽기입니다.

코드에서 가장 큰 문제는 크로스 필터 그룹이 아니라는 것입니다. dc.js를 효과적으로 사용하려면 크로스 필터 개념을 알아야합니다. Crossfilter는 very strong documentation이지만 매우 밀도가 높기 때문에 몇 번 읽어야합니다.

더 나은 이해를 위해 이야기하고 싶다면 언제든지 dc.js user group에 가입하십시오. 아이디어를 얻는 데는 시간이 걸리지 만 가치가 있습니다!