dc.js单击一个图表而不过滤另一个图表(不同的维度)

时间:2016-12-14 16:23:58

标签: d3.js dc.js crossfilter

我很高兴使用DC.js一段时间了。今天是我第一次创建两个图表,从两个维度,都运行相同的交叉过滤变量,事实 - 并且他们不会相互过滤。气泡图过滤条形图,但反之亦然。我有一些明显的错误吗?非常感谢任何指针。

var facts = crossfilter(data);
var all = facts.groupAll();

print_filter(facts);

var appDimension = facts.dimension(function(d){ return d.ShortName; });
var appGroup = appDimension.group().reduce(
  function(p,v){ p.count++; v.NumUsers==0?p.numUsers=1:p.numUsers=v.NumUsers; p.numClients=v.NumClients; p.lc=v.lc; p.LifeCycle=v.LifeCycle; p.fv=v.fv; p.FutureValue=v.FutureValue; return p; },
  function(p,v){ p.count--; v.NumUsers==0?p.numUsers=1:p.numUsers=v.NumUsers; p.numClients=v.NumClients; p.lc=v.lc; p.LifeCycle=v.LifeCycle; p.fv=v.fv; p.FutureValue=v.FutureValue; return p; },
  function(){ return { count:0, numUsers: 0, numClients: 0, lc: 0, LifeCycle: '', fv: 0, FutureValue: '' }; }
);

var lifeCycleDimension = facts.dimension(function(d){ return d.LifeCycle; });
var tempName='';
var lifeCycleGroup = lifeCycleDimension.group().reduce(
  function(p,v){
      if (tempName!=v.ShortName) {
        p++;
        tempName=v.ShortName;
      }
      return p;
    },
  function(p,v){
    if (tempName!=v.ShortName) {
      p--;
      tempName=v.ShortName;
    }
    return p;
  },
  function(){ return 0; }

);

var yearlyBubbleChart = dc.bubbleChart('#col1')
      .width(360)
      .height(600)
      .margins({top: 10, right: 100, bottom: 30, left: 40})
      .dimension(appDimension)
      .group(appGroup)
      .clipPadding(200)
      .yAxisLabel('Number of users')
      .xAxisLabel('Number of clients')
      // .ordinalColors(['#e41a1c','#377eb8','#4daf4a','#984ea3','#ff7f00','#ffff33','#a65628'])
      .colorAccessor(function(p){
          return p.value.lc;
      })
      .colors(colorbrewer.RdYlGn[9])
      .colorDomain([1,6])
      .keyAccessor(function (p) {
          return p.value.numClients;
      })
      .valueAccessor(function (p) {
          return p.value.numUsers;
      })
      .radiusValueAccessor(function (p) {
          return p.value.fv;
      })
      .title(function(d){ return 'App: '+d.key + '\nNum users: '+d.value.numUsers+'\nNum clients: '+d.value.numClients+'\nLife cycle: '+d.value.LifeCycle+'\nFuture value: '+d.value.FutureValue; })
      .maxBubbleRelativeSize(0.15)
      .x(d3.scale.linear().domain([0, 608]))
      .y(d3.scale.log().base(Math.E).domain([1, 120000]))
      .r(d3.scale.linear().domain([0.5, 3]))
      // .elasticY(true)
      // .elasticX(true)
      .yAxisPadding(100)
      .xAxisPadding(500)
      .renderHorizontalGridLines(true)
      .renderVerticalGridLines(true);

  yearlyBubbleChart.yAxis().tickFormat(function(d){ return Math.round(d); });
  yearlyBubbleChart.xAxis().ticks(5);


  var barAmountChart = dc.barChart('#barCount')
      .width(530)
      .height(200)
      .margins({top: 10, right: 50, bottom: 30, left: 45})
      .dimension(lifeCycleDimension)
      .gap(1)
      .group(lifeCycleGroup)
      .title(function(d){ return d.value+' apps in '+d.key+' phase '; })
      .x(d3.scale.ordinal().domain(['Idea','Plan 2017','New','Re-Newed','SunSet','Legacy']))
      .xUnits(dc.units.ordinal);
      barAmountChart.yAxis().ticks(4);

0 个答案:

没有答案