Гистограмма и линейная диаграмма не взаимодействуют в dc.js

Question

Я хочу нарисовать гистограмму и линейную диаграмму, как с тем же размером, так и с группой. Поэтому, я ожидаю, когда я рисую линейную диаграмму, выбирающую временной диапазон в ней, гистограмма становится обновленной. Однако этого не происходит. Вот мой код. Любая помощь будет очень оценили

<link rel="stylesheet" type="text/css" href="http://cdnjs.cloudflare.com/ajax/libs/dc/1.7.0/dc.css"/> 
<script src="http://cdnjs.cloudflare.com/ajax/libs/dc/1.7.0/dc.min.js" charset="utf-8"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.7/leaflet.js"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/crossfilter/1.3.12/crossfilter.min.js" charset="utf-8"></script> 

<div id="dc-freq-chart" style="height: 600px; width: 100%"/> 
<div id="dc-time-chart" style="height: 600px; width: 100%"/> 

<script type="text/javascript"> 
var freqChart = dc.barChart("#dc-freq-chart"); 
var timeChart = dc.lineChart("#dc-time-chart"); 

var controllerElement = document.querySelector('[ng-app=zeppelinWebApp]'); 
var scope = angular.element(controllerElement).scope().compiledScope; 
var dateArray = scope.days; 

var data = []; 
for (var i =0; i < dateArray.length; i++) 
{ 
    data[i] = JSON.parse(dateArray[i]) 
} 

var dateFormat = d3.time.format('%d/%m/%Y'); 
data.forEach(function (d) { 
    d.dd = dateFormat.parse(d.Date); 
}); 


var ndx = crossfilter(data); 
var dateDim = ndx.dimension(function(d){ 
    return d3.time.day(d.dd); 
}) 
var flights = dateDim.group(); 

// freqChart (barchart) properties 
freqChart 
    .width(1000) 
    .height(500) 
    .margins({top: 20, left: 50, right: 10, bottom: 40}) 
    .dimension(dateDim) 
    .transitionDuration(500) 
    .group(flights) 
    .gap(1) 
    .brushOn(false) 
    .title(function(d){ 
     return d.data.key 
     + "\nNumber of Flights on this day: " + d.data.value; 
     }) 
    .x(d3.time.scale().domain(d3.extent(data, function(d) { return d3.time.day(d.dd); })))  
    .elasticY(true) 
    .elasticX(true) 
    .xAxisLabel("Day") 
    .yAxisLabel("Number of flights") 
    .xUnits(d3.time.days) 
    .xAxis().ticks(d3.time.days, 1); 

// timechart (line chart) properties 
timeChart 
    .width(1000) 
    .height(250) 
    .margins({top: 10, right: 30, bottom: 30, left: 50}) 
    .dimension(dateDim) 
    .group(flights) 
    //.transitionDuration(500) 

    .brushOn(true) 
    .renderArea(true) 
    .elasticY(true) 
    .elasticX(true) 
    .x(d3.time.scale().domain(d3.extent(data, function(d) { return d3.time.day(d.dd); })))  
    .xAxisLabel("Day") 
    .yAxisLabel("Number of flights") 
    .xAxis().ticks(d3.time.days, 1); 

dc.renderAll(); 

</script> 

Answer 1

Да. Я использовал функцию rangeChart, и это помогло. Благодарю.