Javascript 如何仅显示已筛选的条目dc.js？

我正在尝试使用迷你条形图过滤器创建dc.js条形图，这样当您选择on filter时，它会将其应用于更大的图表。但它仍然显示其余条目，只是它们是隐藏的。我希望x轴显示过滤集而不是完整集。如何做到这一点？这是一本书。结果如下：

这是密码

var data = [ 
  { 'Expt': 1, 'Run': 1, 'Speed': 85, 'title': 'Title1'  }, 
  { 'Expt': 1, 'Run': 2, 'Speed': 34, 'title': 'Title2'  }, 
  { 'Expt': 1, 'Run': 3,  'Speed': 90, 'title': 'Title3' }, 
  { 'Expt': 1, 'Run': 4, 'Speed': 107, 'title': 'Title4' },
  { 'Expt': 1, 'Run': 5, 'Speed': 85, 'title': 'Title5'  }, 
  { 'Expt': 1, 'Run': 6, 'Speed': 34, 'title': 'Title6'  }, 
  { 'Expt': 1, 'Run': 7,  'Speed': 90, 'title': 'Title7' }, 
  { 'Expt': 1, 'Run': 8, 'Speed': 107, 'title': 'Title8' }
];

var ndx           = crossfilter(data),
runDimension      = ndx.dimension(function(d) {return +d.Run;}),
filterDimension   = ndx.dimension(function(d) {return +d.Run;}),
speedSumGroup     = runDimension.group().reduceSum(function(d){return d.Speed})
  var chart = dc.barChart("#test");
  chart
    .width(768)
    .height(280)
    .gap(20)
    .x(d3.scale.linear().domain([0, data.length + 1]))
    .brushOn(false)
    .centerBar(true)
    .renderLabel(true)
    .xAxisPadding(1)
    .yAxisLabel("Y Axis")
    .elasticX(true)
    .dimension(runDimension)
    .group(speedSumGroup)
    .renderTitle(true).title(function (d) {
      return 'test: ' + d.value;
        })
    .renderHorizontalGridLines(true)
    .label(function (d) {
            console.log(d);
            return 'test';
        });

  chart.render();
  var chart2 = dc.barChart("#brush");
  chart2
    .width(768)
    .height(180)
    .gap(20)
    .x(d3.scale.linear().domain([0, data.length + 1]))
    .brushOn(true)
    .centerBar(true)
    .renderLabel(true)
    .xAxisPadding(1)
    .yAxisLabel("Y Axis")
    .elasticX(true)
    .dimension(filterDimension)
    .group(speedSumGroup)
        .elasticY(true)
    .renderTitle(true).title(function (d) {
      return 'test: ' + d.value;
        })
    .renderHorizontalGridLines(true)
    .label(function (d) {
            console.log(d);
            return 'test';
        });
  chart2.render();

---

你会认为

elasticX

可以做到，对吗？但我认为这里发生的事情是，垃圾桶仍然存在，但是是空的。因此，dc有助于“显示您的零”

我认为有两种可能的解决办法：

• 使用范围/焦点图表功能，如移动和音量的上所示

• 更直接地回答您的问题：预先过滤掉零，以便elasticX按照您的预期工作-参见本常见问题解答答案中的第二个示例：

---

我尝试了两种方法，两种方法看起来都很有效，但每种方法似乎都有问题。“范围/焦点”给出了不均匀的条宽、厚重叠条，请参见。第二种方法不起作用，若我最初并没有从画笔中选择任何内容，然后增加画笔选择。看这个。也许你能看出我做错了什么。你能用master最新的dc.js试试吗？我在七月份在这两个方面都做了修复。太棒了！很高兴为您提供帮助。后续问题之一是是否有任何方法可以改变过滤元素的行为。正如你所看到的，它是用画笔在图表上调零的。我希望它是可见的，但变灰了。如果您使用的是范围/焦点图表功能，您可能希望两个图表位于同一维度上。维度只观察其他维度上的过滤器，而不是自己的维度。