javascript - 条形图和折线图在 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 函数，这很有帮助。谢谢。