Dc.js将范围图表应用于多个图表

时间:2014-12-12 13:58:53

标签: dc.js crossfilter

过去几周我一直在使用dc.js,但有一个问题我似乎无法弄明白。

我希望能够使用画笔滤镜更改基于单个图表的四个不同图表的比例。有点像:

priorityTotChart
  .width(2*w/3).height(h/3)
  .margins({top: 10, right: 50, bottom: 20, left: 40})
  .dimension(dateDim)
  .group(priorityTotal)
  .centerBar(true)
  .gap(1)
  .x(d3.time.scale().domain([minDate,maxDate]))
  .elasticY(true)
  .brushOn(true);

var translate = 3;  

priority1Chart.width(w/3)
  .height(h/6)
  .transitionDuration(300)
  .margins({top: 10, right: 50, bottom: 25, left: 40})
  .dimension(dateDim)
  .group(priority1)
  .mouseZoomable(false)
  .x(d3.time.scale().domain([minDate,maxDate]))
  .xUnits(d3.time.months)
  .elasticY(true)
  .brushOn(false)
  .ordinalColors(["red"])
  .rangeChart(priorityTotChart)
  .yAxisLabel("Hits per day")
  .renderArea(true)
  .renderlet(function (chart) {
    chart.selectAll("g._1").attr("transform", "translate(" + translate + ", 0)");
});

priority2Chart.width(w/3)
  .height(h/6)
  .transitionDuration(300)
  .margins({top: 10, right: 50, bottom: 25, left: 40})
  .dimension(dateDim)
  .group(priority2)
  .mouseZoomable(false)
  .x(d3.time.scale().domain([minDate,maxDate]))
  .xUnits(d3.time.months)
  .elasticY(true)
  .brushOn(false)
  .ordinalColors(["orange"])
  .rangeChart(priorityTotChart)
  .yAxisLabel("Hits per day")
  .renderArea(true)
  .renderlet(function (chart) {
    chart.selectAll("g._1").attr("transform", "translate(" + translate + ", 0)");
});

priority3Chart.width(w/3)
  .height(h/6)
  .transitionDuration(300)
  .margins({top: 10, right: 50, bottom: 25, left: 40})
  .dimension(dateDim)
  .group(priority3)
  .mouseZoomable(false)
  .x(d3.time.scale().domain([minDate,maxDate]))
  .xUnits(d3.time.months)
  .elasticY(true)
  .brushOn(false)
  .ordinalColors(["blue"])
  .rangeChart(priorityTotChart)
  .yAxisLabel("Hits per day")
  .renderArea(true)
  .renderlet(function (chart) {
    chart.selectAll("g._1").attr("transform", "translate(" + translate + ", 0)");
});

priority4Chart.width(w/3)
  .height(h/6)
  .transitionDuration(300)
  .margins({top: 10, right: 50, bottom: 25, left: 40})
  .dimension(dateDim)
  .group(priority4)
  .mouseZoomable(false)
  .x(d3.time.scale().domain([minDate,maxDate]))
  .xUnits(d3.time.months)
  .elasticY(true)
  .brushOn(false)
  .ordinalColors(["green"])
  .rangeChart(priorityTotChart)
  .yAxisLabel("Hits per day")
  .renderArea(true)
  .renderlet(function (chart) {
    chart.selectAll("g._1").attr("transform", "translate(" + translate + ", 0)");
});

但是,这种方法似乎不起作用,因为只会更新使用.rangeChart(priorityTotChart)的最后一个图表。

我可以通过使每个图形依赖于前一个图形的范围来解决这个问题,即priority1Chart具有.rangeChart(priorityTotChart),而priority2Chart具有.rangeChart(priority1Chart)等,但是这种方法非常慢。所以我希望有更好的方法来达到同样的效果?

提前致谢!

2 个答案:

答案 0 :(得分:4)

提出问题的另一种方式是,"如何将多个焦点图表附加到单个范围图表?"

(至少,如果你只关心刷范围图表来缩放焦点图表,而不是相反。)

鉴于这个新问题,请看一下coordinateGridMixin.focusChart的实现:

_chart.focusChart = function (c) {
    if (!arguments.length) {
        return _focusChart;
    }
    _focusChart = c;
    _chart.on('filtered', function (chart) {
        if (!chart.filter()) {
            dc.events.trigger(function () {
                _focusChart.x().domain(_focusChart.xOriginalDomain());
            });
        } else if (!rangesEqual(chart.filter(), _focusChart.filter())) {
            dc.events.trigger(function () {
                _focusChart.focus(chart.filter());
            });
        }
    });
    return _chart;
};

我们需要做的就是制作一个带有多个焦点图表的新功能版本。由于此功能无法访问任何内部数据,因此我们可以“修补”#34;用于添加功能的任何坐标网格图:

chart1.focusCharts = function (chartlist) {
    if (!arguments.length) {
        return this._focusCharts;
    }
    this._focusCharts = chartlist; // only needed to support the getter above
    this.on('filtered', function (range_chart) {
        if (!range_chart.filter()) {
            dc.events.trigger(function () {
                chartlist.forEach(function(focus_chart) {
                    focus_chart.x().domain(focus_chart.xOriginalDomain());
                });
            });
        } else chartlist.forEach(function(focus_chart) {
            if (!rangesEqual(range_chart.filter(), focus_chart.filter())) {
                dc.events.trigger(function () {
                    focus_chart.focus(range_chart.filter());
                });
            }
        });
    });
    return this;
};

我们还需要从coordinateGridMixin中复制rangesEqual辅助函数,以使其正常工作。

我创建了一个示例并将其添加到dc.js示例中:

http://dc-js.github.io/dc.js/examples/multi-focus.html

您可以在此处查看来源:

https://github.com/dc-js/dc.js/blob/master/web/examples/multi-focus.html

本机支持这很好,包括相反的情况缩放 - >过滤器,需要更改dc.js内部。我添加了一个问题来跟踪这个想法:https://github.com/dc-js/dc.js/issues/820

答案 1 :(得分:2)

范围图表适用于焦点图表的.x() - 比例。

您可以做的是全局定义一个比例,并将其用于应由范围图表控制的每个图表。只有一个焦点图表必须设置.rangeChart()属性。

这是未定义的行为我认为这意味着将来可能会发生变化。

伪代码:

var xScale = d3.scale.linear();
var xScaleRange = d3.scale.linear();

var rangeChart = dc.lineChart('#R').x(xScaleRange).[...];

var focusChartA = dc.barChart('#A').x(xScale).rangeChart(rangeChart).[...];
var focusChartB = dc.barChart('#B').x(xScale).[...];