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函数，这有帮助。感谢。

条形图和折线图在dc.js中不相互作用

1 个答案: