dc.js seriesChart似乎不适用于范围图表

Question

我一直在尝试使用刷子的rangechart滤清器，以便与系列设施一起使用。主要图表似乎没有响应过滤器。我以系列为例。

var chart = dc.seriesChart("#test");
var overviewChart = dc.seriesChart("#test-overview");
var ndx, runDimension, runGroup, overviewRunDimension, overviewRunGroup;
var experiments = d3.csv.parse(d3.select("pre#data").text());
  ndx = crossfilter(experiments);
  runDimension = ndx.dimension(function(d) {return [+d.Expt, +d.Run]; });
  overviewRunDimension = ndx.dimension(function(d) {return [+d.Expt, +d.Run]; });
  runGroup = runDimension.group().reduceSum(function(d) { return +d.Speed; });
  overviewRunGroup = overviewRunDimension.group().reduceSum(function(d) { return +d.Speed; });
  chart
    .width(768)
    .height(480)
    .chart(function(c) { return dc.lineChart(c).interpolate('basis'); })
    .x(d3.scale.linear().domain([0,20]))
    .brushOn(false)
    .yAxisLabel("Measured Speed km/s")
    .xAxisLabel("Run")
    .clipPadding(10)
    .elasticY(true)
    .dimension(runDimension)
    .group(runGroup)
    .mouseZoomable(true)
    .rangeChart(overviewChart)
    .seriesAccessor(function(d) {return "Expt: " + d.key[0];})
    .keyAccessor(function(d) {return +d.key[1];})
    .valueAccessor(function(d) {return +d.value - 500;})
    .legend(dc.legend().x(350).y(350).itemHeight(13).gap(5).horizontal(1).legendWidth(140).itemWidth(70));
  chart.yAxis().tickFormat(function(d) {return d3.format(',d')(d+299500);});
  chart.margins().left += 40;
  overviewChart
    .width(768)
    .height(100)
    .chart(function(c) { return dc.lineChart(c).interpolate('basis'); })
    .x(d3.scale.linear().domain([0,20]))
    .brushOn(true)
    .xAxisLabel("Run")
    .clipPadding(10)
    .dimension(overviewRunDimension)
    .group(overviewRunGroup)
    .seriesAccessor(function(d) {return "Expt: " + d.key[0];})
    .keyAccessor(function(d) {return +d.key[1];})
    .valueAccessor(function(d) {return +d.value - 500;})
  dc.renderAll();

它证明了我遇到的问题。有任何建议吗？

Answer 1

Note ：该问题已在DC.JS V3中修复，因为复合图现在拥有刷子并正确过滤了孩子。以下仅与DC.JS V2有关

好吧，我有点奏效，有一些丑陋的代码。这里的一般问题是，DC.JS图表没有一种在实例之间共享刷子的方法，因此一般的复合刷牙（其中有很多实例）的工作状况不佳。

特别是，这是串联图表的问题。对于任何有兴趣的人来说，偶数特定的焦点系列图表都在这里。

如果您只想让某些事情有效，这是我想到的一个非常可怕的解决方法。

首先，一件事不是解决方法。您始终希望使用相同的维度和组来进行焦点和范围图表。这是因为您不希望他们互相过滤：它们是相同数据的视图，并且从逻辑上共享刷子。

所以我做到了：

overviewChart
  .dimension(runDimension)
  .group(runGroup)

某人在某个时候试图通过不过滤复合图表来解决复合过滤问题，而是将过滤器传递给其子女。因此，如果您在一个孩子上捕获过滤事件，并且在过滤时进行范围图表通常会做的事情，则将获得所需的行为。

这是真的很丑陋的地方：

overviewChart
  .chart(function(c,_,_,i) {
  var chart = dc.lineChart(c).interpolate('basis');
  if(i===0)
    chart.on('filtered', function (chart) {
        if (!chart.filter()) {
            dc.events.trigger(function () {
                overviewChart.focusChart().x().domain(overviewChart.focusChart().xOriginalDomain());
                overviewChart.focusChart().redraw();
            });
        } else if (!rangesEqual(chart.filter(), overviewChart.focusChart().filter())) {
            dc.events.trigger(function () {
                overviewChart.focusChart().focus(chart.filter());
            });
        }
    });
  return chart;
  })

on('filtered', ...)的内容几乎是从rangechart的坐标网格图中批发出来的。

"工作"小提琴的叉子。我将"工作"引用为"工作"是因为存在一个问题，即图表边界上的点没有被渲染，这会导致这里荒谬的过渡。

但有点有效。