Question

我正在尝试使用迷你条形图过滤器创建dc.js条形图，以便在选择过滤器时将其应用于较大的图表。但它仍然显示其余的条目只是隐藏。我希望x轴显示过滤后的设置不完整。这该怎么做？这是一个jsfiddle。结果如下：

Result

这是代码

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();

Answer 1

您会认为elasticX会这样做，对吗？但我认为这里发生的事情是垃圾箱仍然存在，但是空的。因此，直流有助于显示你的零＆＃34;。

我看到两个可能的解决方案：

使用范围/焦点图表功能，如移动和音量dc.js stock demo所示。 https://github.com/dc-js/dc.js/blob/master/web/docs/api-latest.md#rangechartchart
更直接地回答您的问题：预过滤掉零，以便弹性X按预期工作 - 请参阅此常见问题答案中的第二个示例：https://github.com/dc-js/dc.js/wiki/FAQ#filter-the-data-before-its-charted

如何仅显示已过滤的条目dc.js？

1 个答案: