Question

我一直在尝试使用带有画笔的rangeChart过滤器来处理seriesChart。主图表似乎没有响应过滤器。我参加了series.html示例，并在jsFiddle上添加了一个rangeChart，series-with-range-example

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

注意：此问题已在dc.js v3中修复，因为复合图表现在拥有画笔并正确过滤子项。以下内容仅与dc.js v2相关。

嗯，我有点工作，有点丑陋的代码。这里的一般问题是dc.js图表没有办法在实例之间共享画笔，因此复合画笔（一般情况下存在大量实例）并不能很好地工作。 / p>

特别是here is the issue for series charts。对于任何感兴趣的人，even-more specific issue of focus-series charts is here。

如果你只想得到一些有用的东西，这是我提出的一个非常可怕的解决方法。

首先，有一件事不是解决方法。您始终希望为焦点和范围图表使用相同的维度和组。这是因为您不希望它们相互过滤：它们是对相同数据的视图，并在逻辑上共享画笔。

所以我做了：

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', ...)的东西几乎被批量复制出范围图的坐标网格图实现。

"Working" fork of your fiddle。我把＆＃34;工作＆＃34;在引号中因为there is an issue where points on the boundary of a chart do not get rendered，这导致了荒谬的过渡。

但它有点奏效。

dc.js seriesChart似乎不适用于rangeChart

1 个答案: