Question

请参阅此笔 https://codepen.io/rdavi10471a2/project/editor/XwGGYo

单击任何图表将过滤数据，但过滤器未反映在选择菜单中

使用选择菜单本身将过滤图表，因此不清楚为什么选择菜单UI不会在图表过滤器上更新。

在最左侧的图表中选择年份会导致Year下拉列表更改，但是从最右侧的图表中选择部门不会过滤部门下拉列表，也不会从中心图表中选择单个分支来过滤分支下拉列表。 / p>

菜单的定义如下

 branchdd
    .dimension(branchDimension)
    .group(branchDimension.group())
      .multiple(true)
     .numberVisible(5)
     .title(kv => kv.key)  
   .controlsUseVisibility(true)

deptdd
    .dimension(deptDimension)
    .group(deptDimension.group())
      .multiple(true)
     .title(kv => kv.key)  
   .controlsUseVisibility(true)
perioddd
    .dimension(dateDimension3)
    .group(dateDimension3.group())
      .multiple(true)
     .title(kv => kv.key)  
   .controlsUseVisibility(true)

样本图表定义

salesbybranch
    .width(300)
    .height(400)
   // .x(d3.scaleLinear().domain([6,20]))
    .elasticX(true)
    .dimension(branchDimension)
    .group(salesbranch)
    .fixedBarHeight(10)
    .title(function(d) { return "Value: " +d.key+" " + dollarformat(d.value); })
    .renderTitle(true)

 salesbybranch.xAxis().ticks(5).tickFormat(d3.formatPrefix(".2", 1e6)) 
salesbybranch.renderlet(function (chart) {
 salesbybranch.xAxis().ticks(5).tickFormat(d3.formatPrefix(".2", 1e6)) 
})

Answer 1

原谅forEach放在单个元素上，但在dc.renderAll（）之后将其放置在文档中，以便在添加图表后可以执行（需要更好的格式设置，但它向用户显示了过滤器是什么）。最好也移到页面上某处的可折叠单个div

    dc.chartRegistry.list().forEach( function(e){
      //e.on('filtered', refreshTable);
      ['filter'].forEach( function(n) {
        this.root().append('div')
          .classed(n, true)
          //.attr('id', `${this.anchorName()}-${n}`)

      }, e);

      ['reset'].forEach( function(n) {
        this.root().append('a')
          .classed(n, true)
          .attr('id', `${this.anchorName()}-${n}`)
          .text(n === 'reset' ? 'Clear Filters' : '')
          .on('click', function() {
              console.log(e)
            e.replaceFilter(null);
            dc.redrawAll();
            console.log(`clicked ${n} div`);
          });
      }, e);
});

  $('.reset').hide();
  $('.filter').css("background-color","yellow")
  $('.filter').css("overflow","scroll")
  $('.filter').css("max-height","50px")
})

一如既往可以使用一些清理方法。

折线图过滤后，选择菜单不更新

1 个答案: